Бомба! То что надо было. И как раз про кастомный селект. И про emit было раньше не до конца понятно. Теперь , вроде как, все стало на свои места! Хороший урок, граммотная речь. Подписка и лайк!)
1. При addEventListener можно не юзать bind, достаточно обычной передачи метода, контекст не теряется 2. При removeEventListener надо указывать true в конце (параметр useCapture должен быть таким же как и при создании слушателя), иначе не удалится Косячнул под конец видоса, ты чего) но всё равно лайк)
Было бы круто, чтобы еще обернуть доступностью с клавиатуры подобный компонент + как он поведёт себя в мобиле, учитывать ли смещение по верхней границе экрана или еще что, вообще в мобиле дефолтный селект открывается в "модалке", что привычнее
Kempriol вообще по бест практису надо для мобильного разрешения сделать нативный селект. Просто создать тен select с опциями и показывать его на мобилке а стилизованный скрыватт
1) Зачем держать в памяти обработчик которые отвечает за компонент которого нету на странице 2) При каждой новой отрисовке компонента, хук mount будет закидывать +1 оброботчик. Т.е. будет утечка памяти. beforeDestroy убирает слушатель и утечка не происходит. Итог: Для того, что бы убрать обработчик когда компонент не будет на странице и не было утечки памяти.
всё здорово, спасибо! в конце только c добавлением _mounted_ не могу теперь свернуть список опций по клику _@click="areOptionsVisible = !areOptionsVisible"_ , меняется false сразу на true. и ещё, в вашем видео было сказано использовать *is* для boolean, тут уже в названиях стоит избегать тогда множественного числа)))
да, автор не учел этот момент почему то. я поправил вызываемую функцию при клике на document, хз насколько правильно но работает hideSelect(e) { if (!document.querySelector(".title").contains(e.target)) { this.areOptionsVisible = false; } }
Да можно. Нужно из метода где выбирается опция создать эмит с названием 'input': this.$emit("input", value), где value это выбранная опция. В этом случае если эмитися событие с названием input, можно из родителя зацепиться за него v-model'ю
![[ВАЖНО - Читай описание] BUTTON. Создание универсального и переиспользуемого компонента Vue](http://i.ytimg.com/vi/gUJFLFvVV-g/mqdefault.jpg)
![[ВАЖНО - Читай описание] BUTTON. Создание универсального и переиспользуемого компонента Vue](/img/tr.png)
![[ВАЖНО - Читай описание] Универсальный компонент Слайдер (carousel) на Vue.js без плагинов!](http://i.ytimg.com/vi/ak61Y4-lGsQ/mqdefault.jpg)
![[ВАЖНО - Читай описание] Таблица на Vue.js. VUEX+AXIOS+API. Пагинация и сортировка данных.](/img/1.gif)
Спасибо! Полезный урок. Как раз надо было кастомный селект сделать, да и понять принцип как это работает. )
Реально бомба! Отличный урок! Подача супер - всё по теме, чётко и без соплей! Лайк и подписка однозначно! Все курсы пересмотрю ...
Спасибо! Очень годные уроки
Бомба! То что надо было. И как раз про кастомный селект. И про emit было раньше не до конца понятно. Теперь , вроде как, все стало на свои места! Хороший урок, граммотная речь. Подписка и лайк!)
1. При addEventListener можно не юзать bind, достаточно обычной передачи метода, контекст не теряется
2. При removeEventListener надо указывать true в конце (параметр useCapture должен быть таким же как и при создании слушателя), иначе не удалится
Косячнул под конец видоса, ты чего) но всё равно лайк)
а еще лучше не юзать true в лисенерах документа, а использовать везде @click.stop в самом селекте, тогда вообще не будет лишних срабатываний :)
супер! как же Вы мне помогли! спасибо!
Спасибо большое
Было бы круто, чтобы еще обернуть доступностью с клавиатуры подобный компонент + как он поведёт себя в мобиле, учитывать ли смещение по верхней границе экрана или еще что, вообще в мобиле дефолтный селект открывается в "модалке", что привычнее
Kempriol вообще по бест практису надо для мобильного разрешения сделать нативный селект. Просто создать тен select с опциями и показывать его на мобилке а стилизованный скрыватт
HEELP! =) Почему когда добавляю обработчики Mounted и beforeDestroy они убирают селекты но не меняется title на выбранный селект?
Super
А как два таких элемента на странице использовать? чтоб они раздельно выбирали данные?
! ВАЖНО - Читайте описание к видео ! 🔥🔥🔥👆👆👆
ало, где ссылка на гит
Подскажите, пожалуйста как заанимировать появление option?
а как перезаписать изначальное значение value в родительской data?
А как быть в случае если дефолтное значение из пропса будет поступать?
Здравствуйте, подскажите какую версию vue вы используете в данном видео ? 2 || 3?
Здравствуйте! Как можно подобный компонент воткнуть на уже готовый сайт?
а для чего создали beforeDestroy не пойму
наверное, чтобы изменять значение hideSelect обратно(из true в false). Хотя мне тоже не до конца понятно зачем это, работает и без него
1) Зачем держать в памяти обработчик которые отвечает за компонент которого нету на странице
2) При каждой новой отрисовке компонента, хук mount будет закидывать +1 оброботчик. Т.е. будет утечка памяти. beforeDestroy убирает слушатель и утечка не происходит.
Итог: Для того, что бы убрать обработчик когда компонент не будет на странице и не было утечки памяти.
всё здорово, спасибо!
в конце только c добавлением _mounted_ не могу теперь свернуть список опций по клику _@click="areOptionsVisible = !areOptionsVisible"_ , меняется false сразу на true.
и ещё, в вашем видео было сказано использовать *is* для boolean, тут уже в названиях стоит избегать тогда множественного числа)))
В названиях надо придерживаться правил языка, а не от балды буквы набирать. Всё там правильно. )
Да у меня тоже такой проблема
@@mrbasfed1948 ты не прав
да, автор не учел этот момент почему то. я поправил вызываемую функцию при клике на document, хз насколько правильно но работает
hideSelect(e) {
if (!document.querySelector(".title").contains(e.target)) {
this.areOptionsVisible = false;
}
}
@@youtubestark873 Спасибо!) Тоже не мог понять почему элемент не сворачивается
Лайк однозначно! Как называется тема редактора?
Konstantin Khomenko material oceanic
Можно веть сделать навигацию таким образом? И чтоб изначально допустим было выбрано 'главная' ?
Без проблем
А реально как то сделать через дерективу v-model ?? Что бы был прям реально как полностью кастомный select без лишних емитов
Да можно. Нужно из метода где выбирается опция создать эмит с названием 'input': this.$emit("input", value), где value это выбранная опция. В этом случае если эмитися событие с названием input, можно из родителя зацепиться за него v-model'ю
@@gofrontend2220 можно пример ?
а мультиселект ?