在已经成型的项目中，如果没有 全局的弹框方法 并且模块 业务逻辑比较复杂，弹框很多，使用 el-dialog 真的很容易增加页面 的复杂度。这里对el-dialog 进行了一层封装方法,还有很多不足，希望指正。
./index.js
import Vue from 'vue'
import Main from './index.vue'
const dialog = function(options) {
options = { ...options } || {}
Vue.component('dialogSlot', options.component)
delete options.component
const dialogConstructor = Vue.extend(Main)
const instance = new dialogConstructor({
data: options
})
instance.$mount()
return instance
}
export default dialog
./index.vue
<el-dialog class="dialog" :width="width" append-to-body :title="title" :visible="visible" @close="close">
<dialogSlot ref="dialog" :data="data" @receiveData="receiveFunc" />
export default {
data() {
return {
title: '',
data: {},
width: '50%',
visible: false, // visible 请不要传值
sureBtn: () => {},
data1: null
}
},
created() {
setTimeout(() => {
this.visible = true
})
},
methods: {
receiveFunc(data) {
this.data1 = data
},
close() {
this.visible = false
setTimeout(() => {
this.$el.remove()
}, 500)
},
async sure() {
let { sureBtn, data, data1, $refs } = this
let defineDialog = $refs.dialog
if (!data1) {
data1 = defineDialog
defineDialog = undefined
}
let back = sureBtn(data, data1, defineDialog)
if (back instanceof Promise) {
back = await back
}
if (back) this.close()
}
}
}
.dialog{
.el-dialog__header{
border-bottom:1px solid #EBEEF5;
padding: 16px 20px;
}
.el-dialog__footer{
border-top:1px solid #EBEEF5;
padding: 16px 0;
margin: 0 20px;
}
}
