本文介绍了如何在Vue中封装一个动态的对话框组件，支持传入标题、内容及不同类型的按钮，具备打开、关闭及回调函数功能。通过组件化的弹窗，可以方便地在应用中实现多种弹出需求。
简单介绍一下vue中常用dialog组件的封装：
实现动态传入内容，实现取消，确认等回调函数。
首先写一个基本的弹窗样式，如上图所示。
在需要用到弹窗的地方中引入组件：
import dialogBar from './dialog.vue'
components:{
'dialog-bar': dialogBar,
},
点击一个按钮显示弹窗，并保证关闭弹窗后再次点击依旧显示
在弹窗组件中定义一个value值：v-model="sendVal"，sendVal初始值为false。
在打开弹窗的方法中赋值：
openMask(){
this.sendVal = true;
}
在dialog.vue组件中做如下操作：
props: {
value: {} // 注意此处获取的value对应的就是组件标签中的v-model
}
定义一个showMask变量用于控制是否显示弹窗
mounted(){
this.showMask = this.value; // 在生命周期中，把获取的value值获取给showMash
},
watch:{
value(newVal, oldVal){
this.showMask = newVal; // 监测value的变化&#x
最低0.47元/天 解锁文章
扫一扫
1948
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
