Vue之封装一个Modal的Function

在业务中，我们经常会遇到各种各样的弹窗组件，一般我们都是直接将其封装成一个组件，通过v-model或者v-if之类的手段进行控制, But 很容易就出现下面这种情况

this.$Modal.confirm({
  content:  '详情弹窗‘
})

上述的方式，我们可以更加简洁地维护弹窗状态，而不用去同时维护对应的html和状态，简单看下下面的sample

import Vue, { CreateElement } from "vue";
import { Button } from "view-design";

let Instance!: any;

export default function deleteModal(props: any) {
  if (!Instance) {
    Instance = new Vue({
      data() {
        return {
          visible: false,
          onOk: () => {},
          loading: false,
          title: ""
        };
      },
      methods: {
        show(options: any) {
          Instance.visible = true;
          Instance.onOk = options.onOk;
          Instance.loading = options.loading;
          Instance.title = options.title;
          Instance.content = options.content;
        }
      },
      render(this: any, h: CreateElement) {
        const okButton = (scope: any) =>
          h(
            Button,
            {
              props: {
                type: "error",
                ghost: true,
                loading: this.loading
              },
              slot: "ok",
              on: {
                click: () => {
                  this.onOk(scope.close);
                }
              }
            },
            ["删除"]
          );
        return h(
          "Modal",
          {
            props: {
              ...props,
              content: [],
              title: this.title,
              value: this.visible
            },
            on: {
              input: (status: boolean) => {
                this.visible = status;
              }
            },
            scopedSlots: {
              ok: okButton
            }
          },
          [this.content]
        );
      }
    });

    const component = Instance.$mount();
    document.body.appendChild(component.$el);
    const modal = Instance.$children[0];
  }

  Instance.show(props);
  return Instance;
}

上述的Sample的场景是删除提示的按钮, 通过 deleteModal的方式我们就可以调用起对应的窗口, 而不需要在父组件中定义相关的弹窗组件,
其主要原因是通过Vue.$mount获取到对应组件的dom元素,直接挂载到docume.body上, 通过控制实例来执行相关的操作, 但以上的代码还有很多需要改进的地方,

待续...