Vuetify，在不关闭对话框的情况下关闭 Snackbar

Question

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

预期行为：

我应该可以在不关闭对话框的情况下关闭快餐栏

现在发生了什么：

点击快餐栏时对话框正在关闭

这是一个要重现的 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 也没有显示。

我试过的：

我认为单击事件 @click.stop="displaySnackbar = false" 上的 stop 修饰符足以不关闭对话框。
我检查了应用于元素的 z-index。快餐栏有一个 z-index: 1000，对话框有一个 z-index:200。所以我无法调整该值。

是bug吗？我手头的问题怎么解决？

Answer 1

解决方法（如果不需要 "dismiss on clicking outside the dialog" 函数）是将属性 persistent 添加到对话框中。

对话框外的点击（点击快餐栏中的关闭时）是您的对话框被关闭的原因

Answer 2

我遇到了同样的问题。我已经制定了一个解决方案：

https://codepen.io/alignnc/pen/OdWvJd

<template>
    <div id="app">
        <v-app id="inspire">
            <v-layout row justify-center>
                <v-btn
                    color="primary"
                    dark 
                    @click.native.stop="dialog = true">
                    Open Dialog
                </v-btn>
                <!-- dialog -->
                <v-dialog 
                    v-model="dialog" 
                    max-width="290" 
                    :transition="false"
                    :persistent="snack">               
                    <v-card>          
                        <v-card-text>
                            Click "agree" to set <br>
                            this.dialog to false,<br>
                            and this.snack to true
                        </v-card-text>
                        <v-btn
                            @click.prevent ="snack = true">
                            Agree
                        </v-btn>          
                    </v-card>        
                </v-dialog>      
                <v-snackbar
                    v-model='snack'
                    color='error'
                    :top='true'>
                    Hello
                    <v-btn
                        color="accent"
                        flat
                        @click="snack = false">
                        Close
                    </v-btn>
                </v-snackbar>
            </v-layout>
        </v-app>
    </div>
</template>


<script>
    new Vue({
      el: '#app',
      data () {
        return {
          dialog: false,
          snack: false
        }
      }
    })
</script>

Answer 3

对于仍在寻找好的解决方案的任何人：将 <div class="v-menu__content--active" style="display:none; z-index:1000;"></div> 添加为 v-snackbar 的子项。这个技巧 v-dialog 在发生外部点击时认为它不是活动组件并阻止关闭。

Vuetify，在不关闭对话框的情况下关闭 Snackbar

Vuetify, closing Snackbar without closing dialog

vuetify.js