使用TS+Vue3+element-plus封装一个命令式弹窗组件

1
import { app as mainApp } from "@/main";
2
import { DialogProps, ElDialog } from "element-plus";
3
import { h, InjectionKey, nextTick, provide, ref, render, VNode } from "vue";
4

5
export const HideInject: InjectionKey<() => void> = Symbol("CommandDialogHide");
6
export const ShowInject: InjectionKey<() => void> = Symbol("CommandDialogShow");
7

8
export const DestroyInject: InjectionKey<() => void> = Symbol("CommandDialogDestroy");
9
export const ResolveDestroyInject: InjectionKey<(data?: any) => void> = Symbol("CommandDialogPromiseResolve");
10
export const RejectDestroyInject: InjectionKey<(err?: any) => void> = Symbol("CommandDialogPromiseReject");
11

12
// TODO 嵌套式弹窗还未实现,后续用到再说~
13

14
// 解决继承主线应用上下文之后热更新报错的问题,暂时没有找到更好的解决方案
15
if (import.meta.env.DEV) {
16
  const errorLog = console.error;
17
  console.error = (...args) => {
18
    if (args[0].toString().includes(`TypeError: Cannot read properties of null (reading 'nextSibling')`)) {
19
      window.location.reload();
20
    }
21
    errorLog(...args);
22
  };
23
}
24

25
// 弹窗默认属性
26
const defaultDialogProps = {
27
  // 可拖拽
28
  draggable: false,
29
  // 是否点击遮罩关闭
30
  closeOnClickModal: false,
31
  // 弹出时body锁定
32
  lockScroll: true
33
};
34

35
const visible = ref(true);
36
const hideFn = () => {
37
  visible.value = false;
38
};
39
const showFn = () => {
40
  visible.value = true;
41
};
42
const unmount = (container: HTMLElement) => {
43
  hideFn();
44
  render(null, container);
45
};
46
const destroyContainer = (container: HTMLElement) => {
47
  unmount(container);
48
  nextTick(() => {
49
    container.remove();
50
  });
51
};
52

53
export default (
54
  CustomComponent: VNode,
55
  options: Partial<DialogProps & { isProvideAppContext: boolean }> = { isProvideAppContext: false }
56
): Promise<any> => {
57
  visible.value = true;
58
  const { isProvideAppContext = true, ...dialogOptions } = options;
59
  return new Promise(async (resolve, reject) => {
60
    // 创建容器
61
    const container = document.createElement("div");
62

63
    // 单纯调用这个方法会导致promise的状态永远为pending,外部组件将无法获得后续代码的执行权
64
    const destroy = () => {
65
      destroyContainer(container);
66
    };
67

68
    const destroyOnResolve = (data: any) => {
69
      destroy();
70
      resolve(data);
71
    };
72
    const destroyOnReject = (reason: any) => {
73
      destroy();
74
      reject(reason);
75
    };
76

77
    // 弹窗主体
78
    const vnode = h({
79
      setup() {
80
        // 将方法注入到子孙组件内
81
        provide(ShowInject, showFn);
82
        provide(HideInject, hideFn);
83
        provide(DestroyInject, destroy);
84
        provide(ResolveDestroyInject, destroyOnResolve);
85
        provide(RejectDestroyInject, destroyOnReject);
86

87
        return () => (
88
          <ElDialog modelValue={visible.value} {...{ ...defaultDialogProps, ...dialogOptions }} onClosed={destroy}>
89
            {CustomComponent}
90
          </ElDialog>
91
        );
92
      }
93
    });
94
    isProvideAppContext && (vnode.appContext = mainApp._context);
95
    try {
96
      render(vnode, container);
97
    } catch (err) {
98
      reject(err);
99
    }
100

101
    document.body.appendChild(container);
102
  });
103
};

1
const add = async () => {
2
  try {
3
    await CommandDialog(<SysDictAddEdit />, {
4
      title: `添加字典`
5
    });
6
  } finally {
7
    getList();
8
  }
9
};
10

11
const edit = async (row: IDictionaryResponseVo) => {
12
  try {
13
    await CommandDialog(<SysDictAddEdit raw={row} />, {
14
      title: `编辑字典`
15
    });
16
  } finally {
17
    getList();
18
  }
19
};