element-ui modal show

modal.ts

import Vue, { VNode, VNodeData, VueConstructor } from 'vue';
import { app } from '@/main';

/**
 * Show a modal vue component
 * @param constructor Component constructor
 * @param data Component data
 */
export function show<V extends Vue>(
  constructor: VueConstructor<V>,
  data?: VNodeData
): V {
  const wrapper = new Vue({
    name: 'ModalWrapper',
    parent: app,
    data: {
      visible: false,
    },
    watch: {
      visible(v): void {
        if (v === false) {
          setTimeout((): void => {
            this.$destroy();
            this.$el.remove();
          }, 5e3);
        }
      },
    },
    mounted(): void {
      this.visible = true;
    },
    render(h): VNode {
      const d: VNodeData = {
        ...data,
        props: {
          ...(data && data.props),
          visible: this.$data.visible,
        },
        on: {
          ...(data && data.on),
          'update:visible': (v: boolean): void => {
            this.$data.visible = v;
          },
        },
      };
      return h(constructor, d);
    },
  });
  wrapper.$mount(document.createElement('div'));
  wrapper.$parent.$el.append(wrapper.$el);
  const ret = wrapper.$children[0] as V;
  return ret;
}

ModalMixin.ts

import { Component, Prop, Vue } from 'vue-property-decorator';

/**
 * Mixin for support `dialog.show`
 */
@Component
export class ModalMixin extends Vue {
  @Prop({ default: false, type: Boolean })
  public visible!: boolean;

  public get $_visible(): boolean {
    return this.visible;
  }

  public set $_visible(v: boolean) {
    this.$emit('update:visible', v);
  }
}

Example usage:

Add :visible.sync='$_visible' to element drawer or dialog.

  async showEditingDrawer() {
    modal.show(
      (
        await import(
          /* webpackChunkName: "project-admin" */ '@/components/project/ProjectEditingDrawer.vue'
        )
      ).default,
      {
        props: { id: this.id },
      }
    );
  }