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

Question

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

Answer 1

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

It is a very common need to call event.preventDefault() or event.stopPropagation() inside event handlers. Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details.

To address this problem, Vue provides event modifiers for v-on. Recall that modifiers are directive postfixes denoted by a dot.

• .停止
• .预防
• .捕获
• .self
• .一次
• .被动

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

在您的情况下，以下内容可能适合您的需求:

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