Например в какой то библиотеке есть компонент для vue dropdown

Question

Например в какой то библиотеке есть компонент для vue dropdown

и при клыке не в не его оно закрываеться, в самому компоненте они window.addeventlistener ставлять и смотрять если клык не на dropdown то закрывают его? я так понял?или как то делают другие реализации?:

#frontend #javascript #programming #russian #vue.js

0

03.12.2021

19 ответов

12 просмотров

i7 4n

vue-click-outside посмотрите)

0

03.12.2021

Yusif Zourab

Так тоже делают.

0

03.12.2021

Maks Автор вопроса

Yusif Zourab
Так тоже делают.

А как еще делают? а то мне на ум только пришел навешать в компоненте слушатель в mounted

0

03.12.2021

Yusif Zourab

Maks
А как еще делают? а то мне на ум только пришел нав...

Не в mounted. А по факту активации dropdown, нет смысла лишний раз вешать глобальный обработчик. Так же по комментарию выше можно реализовать с помощью кастомной директивы. https://stackoverflow.com/questions/36170425/detect-click-outside-element

0

03.12.2021

Maks Автор вопроса

Yusif Zourab
Не в mounted. А по факту активации dropdown, нет с...

Ммм, можно в директив подать метод , и там его вызвать когда клык не в тому елементу что надо?)

0

03.12.2021

Yusif Zourab

Maks
Ммм, можно в директив подать метод , и там его выз...

Да.

0

03.12.2021

Maks Автор вопроса

Yusif Zourab
Да.

Но зачем создавать новый директив,? если можно прямо в компоненте (выпадного меню) написать обработчик тот же ?

0

03.12.2021

Yusif Zourab

Maks
Но зачем создавать новый директив,? если можно пря...

Смысл создания директивы в том чтобы была возможность переиспользования данного функционала множество раз не дублируя по факту код.

0

03.12.2021

Maks Автор вопроса

Yusif Zourab
Смысл создания директивы в том чтобы была возможно...

Ну тут раз только надо будет использувать код такой, 1 компонент выпадного меню, там написать обработчик такой, и просто испортировал компонент и все

0

03.12.2021

Yusif Zourab

Maks
Ну тут раз только надо будет использувать код тако...

Если вы предполагаете использования подобного функционала несколько раз, то лучше создать директиву, если нет, то пишите прямо в компоненте. Под "использованием несколько раз", я подразумеваю, использование этого функционала в нескольких компонентах. Сначала вы хотите на дропдаун повесить, потом на другое что-то и т.д.

0

03.12.2021

Maks Автор вопроса

Yusif Zourab
Если вы предполагаете использования подобного функ...

Ну я понял вас, смотрел про директивы), а если не нагружать обработчик в компоненте, то будет ли хорошо) на watch навешать isActiveComponent если он true (дроп даун открытий) то добавлять обработxbr document.body.addEventListener а если isActiveComponent = false то просто удалять обработчик, а то если повешать в mounted то по сути обработчик будет ловить клык на всей страницы)

0

03.12.2021

Yusif Zourab

Maks
Ну я понял вас, смотрел про директивы), а если не ...

Нет смысла усложнять код. Вы вешаете обработчик @click на кнопку и указываете функцию которая и и обрабатывает этот клик. В этой функции и вешаете глобальный обработчик + добавляете проверку, существует ли обработчик уже или нет.

0

03.12.2021

Maks Автор вопроса

Yusif Zourab
Нет смысла усложнять код. Вы вешаете обработчик @c...

Ну, а потом его как удалить?) когда закрыл меню?

0

03.12.2021

Yusif Zourab

Maks
Ну, а потом его как удалить?) когда закрыл меню?

Вы же вешаете глобальный обработчик, вот в нем и выполняете удаление самого себя когда операция будет выполнена успешно.

0

03.12.2021