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

Question

我正在使用 Vuetify 并且我有v-data-table. 当我单击行时v-dialog必须打开。我v-switch的v-data-table. 当我单击它切换时，我的问题就出现了v-switch，但也传播并打开我的v-dialog. 在我的codepen中，我有三个 v-switch 单击事件的示例。

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

我的问题是 - 有没有办法停止传播（没有像我的第一个示例中那样的副作用），并且当我单击 v-switch 时仅切换 switch ，而不切换后面的 v-dialog ？

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来切换开关，但模式未打开。