Vuetify笔记(4):v-dialog弹出对话框
1、v-dialog对话框 v-dialog 组件用来通知用户有关特定任务的信息,并且可能包含重要信息,需要作出决定或者涉及多任务;应谨慎使用对话框,因为它是中断的。v-dialog 组件常用属性(1)max-width:限制宽度;(2)v-model:value值双向绑定到show变量,用来控制窗口显示;(3)persisitent:控制窗口不会被意外关闭,布尔类型,...
·
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;
},
}
上述代码效果
更多推荐
已为社区贡献12条内容
所有评论(0)