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

与对话框处于同一级别。我不允许将小吃栏嵌套到对话框中。但即使我尝试，小吃栏也不会显示。

我尝试过的：

• 我认为单击事件

  stop

  上的

  @click.stop="displaySnackbar = false"

  修饰符足以不关闭对话框。
• 我检查了应用于元素的

  z-index

  。小吃栏有一个

  z-index: 1000

  ，对话框有一个

  z-index:200

  。所以我无法调整该值。

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

Answer 1

解决方法（如果不需要“在对话框外部单击时关闭”功能）是将属性

persistent

添加到对话框中。

对话框外部的单击（单击小吃栏中的关闭时）是对话框被关闭的原因

Answer 2

对于仍在寻找良好解决方案的任何人：将

<div class="v-menu__content--active" style="display:none; z-index:1000;"></div>

添加为

v-snackbar

的子级。当单击外部发生并阻止关闭时，这会欺骗

v-dialog

认为它不是活动组件。

Answer 3

我也有同样的问题。我已经提出了一个解决方案：

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 4

在我的例子中，我修复了添加 :attach="true" 到零食栏组件的错误