我正在尝试将对话框和 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
.所以我无法调整该值。 这是一个错误吗?我怎么能解决我手上的问题?
最佳答案
解决方法(如果不需要“在对话框外单击时关闭”功能)是添加属性 persistent
到对话框。
对话框外的单击(单击快捷栏中的关闭时)是您的对话框被关闭的原因
关于vuetify.js - Vuetify,在不关闭对话框的情况下关闭 Snackbar,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49627750/