javascript - 如何在 Vuetify v-switch 中停止传播？

Question

我正在使用 Vuetify，我有v-data-table. 当我点击行时v-dialog必须打开。我v-switch的v-data-table. 当我单击它开关时，我的问题就v-switch出现了，而且还会传播并打开我的v-dialog. 在我的代码笔中，我有三个 v-switch 单击事件的示例。

• 首先是与@click.native.stop。这里我成功处理了传播，但是点击事件不仅在v-switch中，而且覆盖了整个容器（示例中为红色）
• 我的第二次尝试是使用@change. 这里的 switch 事件仅在 v-switch 切换时被激活，但是当我单击 v-switch 时，v-dialog 也会打开。所以@change它也不能正常工作。
• 第三次尝试是 with @change.stop，但没有想要的结果，它与我的第二次尝试相同。

我的问题是 - 有没有办法停止传播（在我的第一个例子中没有副作用），当我点击 v-switch 只切换 switch 而不是和后面的 v-dialog 时？

标签： javascriptvue.jsvuetify.js

Answer 1

只需添加@click.native.stop到您的<v-switch>.

看到它工作：https ://codepen.io/andrei-gheorghiu/pen/RwWPONL

注意：要限制捕获点击的区域，您必须将.v-input--switchsdisplay值更改为inline-block：

.v-input--switch {
  display: inline-block;
}

而且您实际上不需要停止超过click，因为对话框仅在单击时打开。如您所见，您可以使用Tab+Space来切换开关，并且模式未打开。