VUE使用函数动态创建加载框，带有卸载方法

const dialogModelList = {}

/**
 * 弹出一个导出loading框
 */
export const showExportLoading = ()=>{
    let id = random(10)
    dialogModelList[id] = ref(true);
    const exportLoadingComponent = defineComponent({
        name:'ExportLoading',
        setup(){
            const visible = dialogModelList[id];
            return ()=>{
                return h(ElDialog,{
                    width:500,
                    closeOnClickModal:false,
                    closeOnPressEscape:false,
                    modelValue: visible.value,
                    id: `export-loading-${id}`
                },[
                    h('div',{
                        class:'export-loading-tip'
                    },[
                        h('svg',{
                            class:'is-loading',
                            xmlns:"http://www.w3.org/2000/svg",
                            viewBox:"0 0 1024 1024"
                        },[
                            h('path',{
                                fill:"currentColor",
                                d:"M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32m448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32m-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32M195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248m452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248M828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0m-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0"
                            })
                        ]),
                        h('div',{
                            class:'tip'
                        },'导出中，请稍等～'),
                        h('div',{
                            class:'tip-desc'
                        },'1. 可关闭此弹窗，导出仍会在后台继续进行'),
                        h('div',{
                            class:'tip-desc'
                        },'2. 温馨提醒：关闭/刷新页面会导致导出中断'),
                    ])
                ])
            }
        }
    })
    const mountContainer = document.createElement('div');
    document.body.appendChild(mountContainer);
    const app = createApp(exportLoadingComponent);
    // 挂载组件到动态创建的容器上
    const vm = app.mount(mountContainer);

    // 补充：返回关闭方法，方便调用者手动关闭弹窗
    const close = () => {
        dialogModelList[id].value = false;
        // 可选：延迟移除 DOM 节点，避免关闭动画卡顿
        setTimeout(() => {
            app.unmount()
            document.body.removeChild(mountContainer);
            delete dialogModelList[id];
        }, 300);
    };
    const success = ()=>{
        ElNotification.success({
            message:'导出成功！文件开始下载',
            type:'success'
        })
    }
    return {
        vm,
        id,
        close, // 暴露关闭方法
        success,
        get $el(): HTMLElement {
            return vm.$el;
        }
    };
}
//使用 

let { close,success} = showExportLoading()
//关闭
close();
//提示成功
success()

 

 

 

.export-loading-tip{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 20px;

  .is-loading{
    color: var(--el-color-primary);
    width: 64px;
    //加入无限转圈的样式
    animation: spin 3s linear infinite;
  }
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  .tip{
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 20px;
    margin-top: 15px;
  }
  .tip-desc{
    color: var(--el-color-info);
    margin-bottom: 5px;
    width: 275px;
  }
}