成都创新互联是一家专注于成都网站设计、成都网站制作与策划设计,榆次网站建设哪家好?成都创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:榆次等地区。榆次做网站价格咨询:028-86922220
简单介绍一下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的变化，并赋值。
},
showMask(val) {
this.$emit('input', val); // 此处监测showMask目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
}
},而要想关闭弹窗，只需要定义一个方法：
closeMask(){
this.showMask = false;
},此刻已经可以实现弹窗的显示与退出。
下面我们要实现的是动态添加标题，内容等，在组件标签中加入title，content：
可以运用vue的数据双向绑定，更换title，content。
在dialog.vue中获取内容：
props: {
value: {},
content: {
type: String,
default: ''
},
title: {
type: String,
default: ''
},
},
{{title}}
我们可以运用同样的原理来获取不同按钮中的自定名称。
下面我们利用传入的不同type来确定不同的按钮，并提供不同的回调函数。
如传入type为danger，我们可以在dialog.vue中props获取type，并定义一个如下按钮：
{{dangerText}}dangerBtn(){ this.$emit('danger'); // 发送一个danger事件作为回调函数 this.closeMask(); // 关闭弹窗 },
在标签中定义danger的回调并做一些操作：
clickDanger(){ console.log("这里是回调函数") },
同样原理可以获取和增添一些其他的操作：
props: {
value: {},
// 类型包括 defalut 默认， danger 危险， confirm 确认，
type:{
type: String,
default: 'default'
},
content: {
type: String,
default: ''
},
title: {
type: String,
default: ''
},
confirmText: {
type: String,
default: '确认'
},
cancelText: {
type: String,
default: '取消'
},
dangerText: {
type: String,
default: '删除'
},
},
{{cancelText}}
{{dangerText}}
{{confirmText}}
点击此处去github下载弹窗代码： https://github.com/wwjhzc/vue-dialog
总结
以上所述是小编给大家介绍的使用vue实现各类弹出框组件,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
