Vuetify笔记(4):v-dialog弹出对话框-CSDN博客

1、v-dialog对话框

v-dialog 组件用来通知用户有关特定任务的信息，并且可能包含重要信息，需要作出决定或者涉及多任务；应谨慎使用对话框，因为它是中断的。

v-dialog 组件常用属性
（1）max-width：限制宽度；
（2）v-model：value值双向绑定到show变量，用来控制窗口显示；
（3）persisitent：控制窗口不会被意外关闭，布尔类型，默认值为false
（4）scrollable：当包含card, card-title, card-text 以及 card-actions这几个的对话框可滚动设为 true 的时候；card-text 应该指定高度并且设置 overflow-y；布尔类型，默认值为false。

 <v-btn  class="info" @click="addBrand">新增品牌</v-btn>

<!--弹出的对话框-->
<v-dialog max-width="500" v-model="show" persistent>
    <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
            <v-toolbar-title>新增品牌</v-toolbar-title>
        </v-toolbar>
        <!--对话框的内容，表单-->
        <v-card-text class="px-5">
            我是表单
        </v-card-text>
    </v-card>
</v-dialog>
注意一：我们需要在data中定义show与v-dialog组件中的show进行双向绑定
 show: false,//是否显示对话框
注意二：点击按钮 @click="addBrand"的方法需要methods中
 methods:{
     addBrand(){
        this.show=true;
      },
}

上述代码效果