Question

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

预期行为：

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

现在发生了什么：

点击小吃栏时，对话框正在关闭

的JSFiddle

以下是问题的标记：

<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>

Vuetify，关闭Snackbar而不关闭对话框

3 个答案: