Запретить распространение кликов за пределами Quasar q-select

Question

Я использую элементы пользовательского интерфейса Quasar в проекте Vue.js.Для некоторых всплывающих элементов, в частности, q-select в этом случае, щелчок вне q-select вызывает его закрытие.Это нормально - это поведение, которое я хочу, но событие click также распространяется на элемент HTML вне q-select, что может привести к неожиданному / нежелательному поведению.Я бы предпочел, чтобы нажатие вне всплывающего окна q-select только закрывало всплывающее окно и не распространялось ни на какие другие элементы DOM.Поддерживается ли это поведение в Quasar / q-select или мне нужно реализовать это самостоятельно?

Answer 1

Вы можете использовать один из доступных модификаторов событий Vue, чтобы предотвратить, остановить или ограничить возникновение событий.

Очень часто необходимо вызывать event.preventDefault () или событие.stopPropagation () внутри обработчиков событий.Хотя мы можем легко сделать это внутри методов, было бы лучше, если бы методы были связаны исключительно с логикой данных, а не с деталями событий DOM.

Для решения этой проблемы Vue предоставляет модификаторы событий для v-на.Напомним, что модификаторы - это директивные постфиксы, обозначенные точкой.

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

https://vuejs.org/v2/guide/events.html#Event-Modifiers

В вашем случае следующее может соответствовать вашим потребностям:

<q-select v-on:click.stop="doThis" />