Vue2 Dialog弹窗函数式调用实践示例

    <template>
        <button @click="open">打开弹窗</button>
    </template>
    <script>
        import openDialog from 'my-dialog'
        export default {
            methods: {
                open() {
                    openDialog()
                        .then(() => {})
                        .catch(() => {})
                        .finally(() => {})
                }
            }
        }
    </script>

    // api.ts
    import openDialog from 'my-dialog'
    const getUserInfo = () => {
        return fetch('/xxx/api').then(() => {
            openDialog('success')
        })
    }

// dialog.ts
import Vue, { ComponentInstance } from "vue";
import ConfirmDialog from "./confirm-dialog.vue";
export let index = 1000;
export const cache = new Set<string>();
export function openDialog(component: ComponentInstance) {
	const div = document.createElement("div");
	const el = document.createElement("div");
	const id = 'dialog-' + Math.random();
	div.appendChild(el);
	document.body.appendChild(div);
	const ComponentConstructor = Vue.extend(component);
	return (propsData = {}, parent = undefined) => {
		let instance = new ComponentConstructor({
			propsData,
			parent,
		}).$mount(el);
		const destroyDialog = () => {
			if (cache.has(id)) return;
			if (instance && div.parentnode) {
				cache.add(id);
				(instance as any).visible = false;
                // 延时是为了在关闭动画执行完毕后卸载组件
				setTimeout(() => {
					cache.delete(id);
					instance.$destroy();
					// @ts-ignore
					instance = null;
					div.parentNode && div.parentNode.removeChild(div);
				}, 1000);
			}
		};
		// visible控制
		if ((instance as any).visible !== undefined) {
			// 支持sync/v-model
			instance.$watch("visible", (val) => {
				!val && destroyDialog();
			});
			Vue.nextTick(() => ((instance as any).visible = true));
		}
		return new Promise((resolve, reject) => {
			// emit 一个 done 事件关闭
			instance.$once("done", (data: any) => {
				destroyDialog();
				resolve(data);
			});
			// emit 一个 cancel 事件取消
			instance.$once("cancel", (data: any) => {
				destroyDialog();
				reject(data);
			});
		});
	};
}
export function confirmDialog(content: string, editable?: boolean) {
	return openDialog(ConfirmDialog as any)({ content, editable });
}