要做到 API 诉求中的：调用简单、传参简便和可扩展控制弹框样式。参数合并便是 成本最小 的实现方案，配合 TS 效果更佳。定义默认参数，通过 lodash 的 merge ，合并深层属性。通过参数合并还能做到自定义 footer 按钮，控制文本，样式，顺序和执行回调。
// 参数合并 _mergeOptions(originOptions) { const defaultOptions = { component: '', // 弹框主体vue页面 // 可扩展el-dialog官方api所有配置项,小驼峰aaaBbbCcc dialogOpts: { width: '40%', title: '默认标题' }, // 传入弹框主体vue组件的参数 props: {}, // 点击确定回调 onOK: () => { console.log('JSDialog default OK'), this.close() }, // 点击取消回调 onCancel: () => { console.log('JSDialog default cancel'), this.close() }, footer: { ok: btnBuilder({ text: '确定', type: 'primary', order: 0 }), cancel: btnBuilder({ text: '取消', order: 1 }) } } // 参数合并到this.options merge(this.options, defaultOptions, originOptions) const footer = this.options.footer Object.entries(footer).forEach(([key, btnOptions]) => { // 确定和取消默认按钮 if (['ok', 'cancel'].includes(key)) { const clickFn = key === 'ok' ? this.options.onOK : this.options.onCancel // 默认按钮回调优先级: footer配置的clickFn > options配置的onOK和onCancel btnOptions.clickFn = btnOptions.clickFn || clickFn } else { // 新增按钮 // 完善配置 footer[key] = btnBuilder(btnOptions) } }) }
3. render函数
摘取一段 渲染函数 & JSX 官方文档关于 render 的描述： Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用 渲染函数 ，它比模板更接近编译器。 官方文档对渲染函数的写法，参数，对应JSX写法介绍已经很详细，这里就不再赘述。下面代码是在最新vue-cli创建项目上运行的，尝试了JS参数创建元素和JSX创建元素两种写法。
render(createElement) { // 弹框主体 const inner = createElement(options.component, { props: options.props, // 传递参数 ref: 'inner' // 引用 }) // 控制按钮显示隐藏 const showBtns = Object.values(this.footer).filter(btn => !btn.isHide) // 控制按钮顺序 const sortBtns = orderBy(showBtns, ['order'], ['desc']) // 底部按钮 jsx 写法 const footer = ( <div slot="footer"> {sortBtns.map(btn => ( <el-button type={btn.type} onClick={btn.clickFn}> {btn.text} </el-button> ))} </div> ) // 弹框主体 const elDialog = createElement( 'el-dialog', { // el-dialog 配置项 props: { ...options.dialogOpts, visible: this.visible }, on: { closed: this.clearVm }, ref: 'elDialog' }, // 弹框内容：弹框主体和按钮 [inner, footer] ) return elDialog }
4. 封装API
暂时只封装了三个 API ，可根据不同的场景扩展 API ，比如弹框不销毁隐藏，弹框刷新等。
show() ，弹框显示
显示主要是修改 el-dialog 的 visible 为 true ，控制挂载到 body 上的弹框显示。
show() { this.vm.show() }
close() ，弹框关闭
关闭处理流程：修改 el-dialog 的 visible 为 false ；触发 el-dialog 的 closed 事件；执行 clearVm ；执行 vm 的 $destroy() ； destroyed() 回调中将 $el 从 body 中移除。
close() { this.vm.close() }
getInner() ，获取弹框主体实例，可用于访问实例上的方法，控制按钮流程
getInner() { return this.vm.$refs.inner }
四、如何使用
1. 最简单场景，只配置页面
按钮事件回调采用默认的回调，确定和取消按钮都可关闭弹框
import dialogBody from './renderJsx/dialogBody' const dialog = new JSDialog({ component: dialogBody, }) dialog.show() // 弹框显示
效果如下：
2. 控制弹框样式及确定流程
可自定义el-dialog支持的配置项，见 Dialog 对话框 ；比如：title、 customClass 。通过customClass可统一控制项目内弹框的风格；可控制确定取消按钮代码回调。
import dialogBody from './renderJsx/dialogBody' const dialog = new JSDialog({ component: dialogBody, dialogOpts: { title: '靓仔，美女欧嗨呦', customClass:'js-dialog' }, props: { defaultName: 'JSDialog传递的参数' }, onOK() { const inner = dialog.getInner() // 能取到dialogBody的引用 // 控制流程 if (inner.apiMethods.isCanSave()) { // 获取保存数据 const postData = inner.apiMethods.getSaveData() console.log('>>>>> postData >>>>>', postData) // 关闭弹框 dialog.close() } }, onCancel() { dialog.close() // 弹框关闭 } })
效果如下：
3. 自定义footer
自定义按钮可控制执行回调，样式，顺序，显示与隐藏