在使用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.
el)
instance.visible = true
// 暴露实例方便后续的Ref操作
return instance
}
复制代码
接下来是dialogTemplate的实现,可根据实际业务进行调整,以下代码仅作为参考
复制代码实际使用效果
渲染一个带表格的弹窗