vuetify.js - Vuetify，在不关闭对话框的情况下关闭 Snackbar

Question

我正在尝试将对话框和 snackbar 的使用与 VueJS 结合起来。问题如下:

预期行为:

我应该能够在不关闭对话框的情况下关闭 snackbar

现在发生了什么:

单击 snackbar 时正在关闭对话框

这是要重现的 JSFiddle:https://jsfiddle.net/q6m2j4ae/5/

这是问题的标记:

<v-container>
    <v-dialog v-model="displayDialog" max-width="300px">
        <v-card flat>
            This is the dialog content
        </v-card>
    </v-dialog>
    <v-snackbar
            v-model="displaySnackbar"
            :top="true"
            :right="true"
            :vertical="true"
            color="success"
    >
        Some Content
        <v-btn flat @click.stop="displaySnackbar = false">Close</v-btn>
    </v-snackbar>
</v-container>

如您所见， v-snackbar与对话框处于同一级别。我不允许将 snackbar 嵌套到对话框中。但即使我尝试 snackbar 甚至不显示。

我试过的:

我以为stop单击事件的修饰符 @click.stop="displaySnackbar = false"足以不关闭对话框。

我查了 z-index应用于元素。 snackbar 有z-index: 1000并且对话框有 z-index:200 .所以我无法调整该值。

这是一个错误吗？我怎么能解决我手上的问题？

Answer 1

解决方法(如果不需要“在对话框外单击时关闭”功能)是添加属性 persistent到对话框。

对话框外的单击(单击快捷栏中的关闭时)是您的对话框被关闭的原因