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;
      },
}

上述代码效果

 

 

 

Logo

前往低代码交流专区

更多推荐