В настоящее время в большинстве веб-приложений, которые мы создаем и используем, есть много компонентов пользовательского интерфейса, таких как открытие всплывающего окна, раскрывающийся список и закрытие его, когда пользователь щелкает за его пределами.
В некоторых всплывающих окнах у нас может быть очень сложный пользовательский интерфейс или функциональность, которые мы не сможем найти в какой-либо внешней среде CSS, такой как bootstrap, foundation и т. Д., Поэтому, наконец, нам нужно создать наш собственный компонент всплывающего окна.
Мы можем создать свое собственное всплывающее окно, но становится очень сложно поддерживать всплывающие окна, когда у нас есть два или более всплывающих окна в веб-приложении, которое любит поддерживать переменные или писать код js для скрытия и отображения всплывающих окон.
Есть много способов создавать всплывающие окна во Vue, но хороший и простой - создать специальную директиву.
Давайте создадим проект
Во-первых, вам нужно создать проект Vue с помощью vue-cli. Если вы не установили vue-cli, вы можете установить его, перейдя по этой ссылке.
Прежде чем мы создадим нашу настраиваемую директиву, давайте создадим страницу с двумя кнопками, которые показывают и скрывают всплывающие диалоговые окна.
Вы можете посмотреть, что мы собираемся построить на CodePen:
Https://codepen.io/ravipatel2293/pen/MReQjN
Мы собираемся проделать всю нашу работу в одном файле App.vue.
Итак, в файле App.vue добавьте приведенный ниже код и запустите приложение.
Это просто правильно. мы только что поместили две кнопки, которые открывают разные всплывающие окна, когда вы нажимаете на них.
Итак, когда вы запустите код и нажмете любую из кнопок, вы увидите результат, приведенный ниже.
В настоящее время я поместил код директивы в файл App.vue, что не является идеальным способом для этого. В своем проекте создайте одну папку и поместите в нее весь код директивы вместе с этим.
Здесь я не использую никаких переменных или js-кода в компоненте Vue для отображения / скрытия всплывающих окон. Таким образом, для нас будет менее обременительным поддерживать код переменных / js в компоненте, когда у нас есть три или более всплывающих окна на одном экране.
Теперь давайте разберемся с директивой, чтобы вы также могли создать свою собственную директиву и настроить ее в соответствии с вашими требованиями.
Я упомянул все понимание каждой строчки в комментарии к файлу.
Вот и все. Создана наша директива ClickOutSide, которую мы можем использовать во всех компонентах приложения Vue.
Спасибо, что читаете блог.
Дайте мне знать, если у вас есть какие-либо сомнения или вопросы.
Ссылки: https://tahazsh.com/detect-outside-click-in-vue
