全局方法式调用 Element-ui 的 Dialog

用法

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/