让你的el-dialog更优雅

在使用Vue + Element 实现需求时常会遇到单个Vue文件内出现多个弹窗需求，一般会这样写

弹框1 弹框2

复制代码这样的写法在文件内容多的时候容易出现模板臃肿的问题，而且需要外部管理弹窗组件的开关状态visible
可以如何改进

借鉴了NgZoro的Modal组件的Service用法

可以考虑将el-dialog封装成Service来使用

复制代码如何实现

首先需要定义DialogService的入口，内部通过Vue.extendI对组件模板进行继承

// src/service/dialog/index.js
import Vue from ‘vue’

import dialogTemplate from ‘./dialogTemplate.vue’
const DialogConstructor = Vue.extend(dialogTemplate)

import { isPlainObject } from ‘lodash’
export default DialogService(options) {
const instance = new DialogConstructor({
data: isPlainObject(options) ? options : {}
})

instance. $mount() document.body.appendChild(instance.$el)
instance.visible = true

// 暴露实例方便后续的Ref操作
return instance
}
复制代码
接下来是dialogTemplate的实现，可根据实际业务进行调整，以下代码仅作为参考

复制代码实际使用效果

渲染一个带表格的弹窗