#29 Попап и промисы - Vue.js: практика
ฝัง
- เผยแพร่เมื่อ 25 ก.ย. 2024
- Присоединяйтесь к нашему сообществу в Телеграм - t.me/vuejs_club
Код из видео: codesandbox.io...
---
Видео создано благодаря подписчикам проекта на нашем Patreon.
Хотите получать контент на 3 месяца раньше остальных? Присоединяйтесь! / javascriptninja
![[ВАЖНО - Читай описание] Vue.js компонент всплывающее модальное окно используя SLOT и $REFS](/img/n.gif)
Я дико извиняюсь! А когда продолжение?
Читал про refs, но плохо читал, и не знал что можно через refs, у родителя вызивать метод ребенка.Искал неделю), прям топ видео))
Наконец-то вышла тема про флажки и попапы. У нас все делают через флажки и создают их ну очень много. Сам я реализовывал через добавление в класс active. Ну не мог что то лучше придумать. Спасибо что затронули эту тему
Спасибо Илья. Позволю себе оценить ваше изложение знаний. Это по факту очень эффективный подход. Думаю вы сами дошли до этого, конечно пропустив через себя много теории по обучению и прочему. У вас от природы есть предрасположенность к обучаемости и обучению. Вы погружаетесь в предметную область доходя до самой сути, становитесь ее "мастером". Больше вдохновляет не сам вью (который, видно, делался с душой, очень удобный инструмент и маст хев для современного веб программиста), а сама подача материала. Боюсь, после ваших видеокурсов, планка требований к излагающему видеокурс будет высокой. Посмотрел видеокурсов некоторое количество, но такой подачи материала нет ни у кого. Жаль что наткнулся на вас поздно, ожидал что будет очередной видеокурс. но он не очередной.
Спасибо, Илья!
Для доступа к методам дочернего компонента сейчас ведётся работа над специальными функциями `expose` и `defineExpose` для Composition API и `` соответственно. Скорее всего их уже можно использовать. Так что не так с этим всё страшно и костыльно =)
дякую за відео. з нетерпінням чекаю на нові випуски.
Сегодня или завтра.
Сегодня или завтра наступает! С днём рождения меня 🎂
@@JavaScriptNinja с днем рождения, Илья!
Спасибо классный урок получился
спасибо большое за видео, очень интересная тема рефы, нужно будет с ними разобраться, пока что немного сбит с толку с этими попапами, но разберусь=)) спасибо еще раз=))
Спасибо!
спасибо вам!
Довольно длительный период пытался найти оптимальный вариант реализации попапов.
Было много прочитано статьей на эту тему. В одной из них нашел вариант с refs, который Вы показали. Моя реализация заключается в том, что я сделал компонент-обвертку. В этом компоненте у меня вся логика открытия и закрытия попапа и каркас, в который вкладываю другие компоненты попапов. В каждом из них лежит свой html и своя логика. Эти попапы открываю через переменную с их названием. При открытии передаю название нужного попапа.
При реализации этого подхода столкнулся с таким моментом, что refs работают только в одном компоненте и не всплывают до app.js. Если хочешь обратиться к компоненту, то он должен быть, так сказать, на виду)
Даже не представляю, как рефы могли бы "всплывать")
@@neyasbltb Согласен. Это просто мои наблюдения в процессе понимания Vue.
когда продолжение?
Очень и очень поверхностное рассмотрение. модалка это исскуство
Очень годная библиотека, до этого юзал vue-modal но оно не очень нравилось тем что для создания простого окна надо много действий делать, тут все проще
Отличное видео, смотреть как пишет код опытный программист - нереальный кайф
нереальная боль
Тоже глянул после курса Минина )) жду продолжение, очень интересно получается!
Я пока только на середине курса и сюда зашел просто чтобы спросить - подскажите пожалуйста, а когда будут новые видео? Уж очень интересный курс получился!
Ожидайте
Забыл Reject при внезапном уничтожении родителя попапа, например в результате работы роутера.
Да, хорошее замечание. Сценарий очень редкий в данном кейсе, но стоит внимания
Сделал у себя на проекте реализацию диалоговых окон на промисах еще 2.5 года назад. И все прекрасно работает. Только я не использую ref.
Без рефов не получится подставлять произвольный html в слоты, а это большой минус по гибкости
@@JavaScriptNinja А зачем через рефы подставлять? Слоты работают как и обычные слоты во вью. Я использоаал без рефа чтобы вызвать функцию открытия диалога.
Кстати могут быть кейсы когда надо вызвать диалог сразу же монтирования родительского компонента и при обращении рефа еще может не существовать. Например подгрузка диалога идет через асинхронный чанк.
А почему не пойти с этой идеей дальше и не убрать Popup из разметки? Модальный компонент можно создавать внутри "сервиса" и монтировать его куда угодно - например к .
Терпение, на курсе ещё не рассказали о телепорте и о provide/inject
Но сразу поясню - если вы уберете его из разметки вы лишитесь возможности гибко настраивать попап
Мы так сделали у себя на проекте. Минусы: нельзя гибко из родителя попап, а самое главное - Vue ооочень не любит, когда вы руками что-то монтируете в DOM. Так например изначально подобные попапы были не видны во VueDevtools.
Использую модалку от vuetify, и там она закрывается автоматически при нажатии на backdrop. Допустимо ли не резолвить промис, при нажатии на backdrop?
фокус на инпуте, казалось бы что может быть проще. но фокус инпута в модальном окне, которое еще имеет анимацию при открытии не такая и тривиальная задача.
если в директиве в блоке inserted обратится к элементу и выставить фокус то это не работает, вероятно когда анимация еще не закончилась то компонент еще не создался или еще что-то.
Evan советовал так:
bind(el, binding, context) {
context.componentInstance.$once('hook:attached', () => {
input.focus();
});
},
но это также не работает.
единственный рабочий способ это setTimeout.
возможно я еще чего-то не знаю.
Использовать директивы - очень плохая идея для управления подобными вещами
nextTick может быть как-то полезен в этой ситуации?
Здравствуйте Илья. Прежде всего благодарю Вас за курс. Будет ли его продолжение или на этом видео он закончен?
Не закончен, будет
@@JavaScriptNinja Хорошая новость. Спасибо за ответ
Можно избавиться от ref, просто добавив slot scoped с именем например activator. Передать этому слоту функцию open и в родителе ее вызывать.
Только если активация происходит непосредственно из шаблона
@@JavaScriptNinja да, но это один из подходов, что ты не злоупотреблять ref. И это так же оставит возможность управлять popup через ref.
Большое спасибо за курсы! У меня появился вопрос, помогите пожалуйста: У меня есть элемент input (TheInput), это мой кастомный ввод. Я разделил criptonomicon на компоненты и одним из компонентов выделил фильтрацию с пагинацией, причем так как у меня нет стора переменная filter хранится в App.vue. Она передается сначала в компонент фильтрации, а из него в компонент TheInput и при изменении input выдаются ошибки и не меняется переменная filter. Почему?(((
Охх, до этой главы я наверно через полгода только доберусь
Интересная реализация с промисом. Для сравнения - заэмитить confirm, обработать в родителе. После в родителе через ref закрыть попап. Какие есть преимущества у варианта с промисом?
"в родителе через ref" закрыть попап - это плохая идея
@@JavaScriptNinja Почему?
@@sergiishilingov5609 потому что тогда мы приходим к тому же варианту с дроблением логики, с которого начали. Не стоит их смешивать
Property 'open' does not exist on type 'unknown'
Что поделать, слабость тайпскрипта и вью )
Инетесно, хорошая ли идея когда у тебя модалка из 3 и более шагов передовать в resolve("nameStap") и уже опираться на это значение для понимание на каком ты шаге и рисовать соответвущий компонент?
В итоге нужно будет делать что-то вроде
{stepName:"1", data{ field1: 123}}
В видео упрощённый вариант для быстрого понимания.
Нет, потому что resolve одноразовый. Максимум, туда можно передавать имя шага, на котором решили закрыть модалку
Я надеюсь это не последнее видео в данном курсе?
Промис который каким-то образом сохраняется в методе, а потом неожиданно вызывается - ни-на не понятно.
16:30 какие крутилки? Что происходит? Убейте меня
а почему не вынести константу из $options просто в константу выше перед export default у компонента (CONFIRMATION_TEXT)? мы же не используем константу в html
Используем в плейсхолдере
@@JavaScriptNinja оу, плохо следил, спасибо))
Илья, а для патрионов продолжение уже есть?
Нет, этот курс к патреону никакого отношения не имеет, я не пытаюсь вам что-то продать :)
@@JavaScriptNinja не в этом дело, если бы можно было заплатить и продолюить курс было бы даже лучьше =) Все на много прозаичнее, курс хороший и хочется продолжения =)
Аж прийшло просвітлення!! Цікаво чи в реакті можливо таке реалізувати, а то по флажку відкривати модалку, після цього відео, не найс.
Не понимаю почему люди не используют dialog-polyfill
Потому что у нее тоже свои проблемы. И как применение тега dialog решит задачу построения flow с ожиданием попапа
@@JavaScriptNinja Написал коммент в начале видео. И там была проблема, которая легко решается его использованием. Предотвращение перехода фокуса по tab за пределы модального окна. А какие у него есть проблемы?
Читер))