用法
this.$dialog.show({ title: "Dialog", width: "50%", data: { name: "name", age: 18 }, // 非编辑时此项可省略 option: { confirmText: "保存", // 可省 columns: [ { label: "姓名", prop: "name", rules: [ { required: true, message: "请输入姓名", trigger: "blur", }, ], }, { label: "年龄", prop: "age", }, ], }, beforeCancel: (done) => { done(); }, confirmHandle: (res) => { console.log('$dialog.confirm', res.data); this.$message.success("点击了确认按钮,即将关闭窗口"); setTimeout(() => { this.$message.success("业务逻辑已执行完成,关闭窗口"); res.close(); }, 1000); }, });
方法
/src/main.js
import dialog from './components/dialog' Vue.prototype.$dialog = dialog;
/src/components/dialog/index.js
import Vue from 'vue'; import DialogComponent from './index.vue'; let Plugin = function () { this.$root = {}; }; Plugin.prototype.initMounted = function () { this.$root = (() => { let DialogConstructor = Vue.extend(DialogComponent); let instance = new DialogConstructor(); instance.vm = instance.$mount(); document.body.appendChild(instance.vm.$el); instance.dom = instance.vm.$el; return instance.vm; })(); }; Plugin.prototype.show = function (opt) { this.initMounted(); this.$root.show(opt); }; export default new Plugin();
/src/components/dialog/index.vue
<template> <component :is="dialogType" :visible.sync="visible" :beforeClose="beforeCancel" v-bind="dialog" destroy-on-close> <el-form :model="data" :rules="rules" ref="form" label-width="100px"> <!-- 需要自己再扩充功能,这里只支持 input --> <el-form-item :label="field.label" :prop="field.prop" v-for="field in option.columns"> <el-input v-model="data[field.prop]"></el-input> </el-form-item> </el-form> <div class="dialog__footer"> <el-button @click="submit" size="small" :loading="disabled" type="primary"> {{ option.confirmText }} </el-button> <el-button @click="reset" :disabled="disabled" size="small"> {{ option.cancelText }} </el-button> </div> </component> </template> <script> export default { data() { return { formName: 'form', opt: {}, disabled: false, confirmHandle: null, visible: false, dialog: { closeOnClickModal: false, }, isDrawer: false, option: { confirmText: '提交', cancelText: '取消', columns: [], }, data: {}, }; }, computed: { rules() { return {}; }, dialogType() { return this.isDrawer ? 'elDrawer' : 'elDialog'; }, }, methods: { submit() { this.$refs[this.formName].validate((valid) => { if (valid) { this.submitHandle({ data: this.data, close: this.close }); } else { return false; } }); }, reset() { // this.$refs.form.resetForm(); this.$refs[this.formName].resetFields(); this.close(); }, beforeCancel(done) { done(); this.close(); }, show(opt) { this.opt = opt; this.confirmHandle = opt.confirmHandle; let dialog = this.deepClone(opt); ['confirmHandle', 'option', 'data'].forEach((ele) => delete dialog[ele]); this.dialog = Object.assign(this.dialog, dialog); this.dialog.size = this.dialog.width; this.isDrawer = this.dialog.type === 'drawer'; this.option = Object.assign(this.option, opt.option); this.data = opt.data; this.visible = true; }, close() { const callback = () => { this.visible = false; this.$destroy(); this.$el.remove(); }; if (typeof this.dialog.beforeCancel === 'function') { this.dialog.beforeCancel(callback); } else { callback(); } }, submitHandle(data, done) { this.confirmHandle && this.confirmHandle({ data: data, close: this.close, done: done }); }, }, }; </script> <style scoped> .dialog__footer { text-align: right; } </style>
代码来自 Avue(有修改):@smallwei/avue:/packages/core/components/dialog-form/