Vuetify技术问询：关闭Snackbar时避免误关Dialog的问题

我之前也遇到过这个Vuetify组件搭配的问题，其实核心原因要么是事件冒泡触发了Dialog的关闭逻辑，要么是Dialog默认把Snackbar区域判定为“外部点击区域”了。给你两个实用的解决方案：

方案1：给Dialog添加persistent属性 #

这个属性会让Dialog只能通过主动修改绑定的v-model值来关闭，点击外部区域（包括Snackbar）不会触发自动关闭。修改你的Dialog代码即可：

<v-dialog v-model="displayDialog" max-width="300px" persistent>
  <v-card flat>
    This is the dialog content
  </v-card>
</v-dialog>

之后只有你主动将displayDialog设为false时，Dialog才会关闭，完全避免了误触的情况。

方案2：阻止Snackbar的点击事件冒泡 #

如果你还需要保留“点击Dialog外部关闭”的功能，可以给Snackbar添加事件阻止冒泡的修饰符，让点击Snackbar的事件不会向上传递到Dialog的关闭监听：

<v-snackbar v-model="displaySnackbar" @click.stop>
  这里是Snackbar内容
  <v-btn text @click="displaySnackbar = false">关闭</v-btn>
</v-snackbar>

@click.stop会拦截Snackbar上的点击事件，不让它冒泡到外层的Dialog逻辑里，这样点击Snackbar就不会触发Dialog关闭了。

如果你的Snackbar是嵌套在Dialog DOM结构内部的，还可以尝试给Snackbar加上attach属性挂载到body上，不过上面两个方案基本能解决绝大多数场景的问题。

内容的提问来源于stack exchange，提问作者Hammerbot