防止Quasar q-select之外的点击传播

Question

我在Vue.js项目中使用Quasar UI元素.对于某些弹出元素,特别是在这种情况下的q-select,单击q-select外部会使其关闭.这很好 - 这就是我想要的行为,但是click事件也传播到q-select之外的HTML元素,这可能导致意外/不需要的行为.我希望在q-select弹出窗口外单击只会关闭弹出窗口,而不会传播到任何其他DOM元素.Quasar/q-select是否支持此行为,或者我是否需要自己实现此功能？

Answer 1

您可以使用可用的 Vue 事件修饰符之一来防止、停止或限制事件冒泡的方式。

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是很常见的需求。虽然我们可以在方法内部轻松地做到这一点，但如果方法可以纯粹关于数据逻辑而不是必须处理 DOM 事件细节，那就更好了。

为了解决这个问题，Vue 提供了 v-on 的事件修饰符。回想一下，修饰符是用点表示的指令后缀。

• 。停止
• 。防止
• 。捕获
• 。自己
• 。一次
• 。被动的

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

根据您的情况，以下内容可能适合您的需求：

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