如何通过JS文件直接动态显示Element Plus的ElDialog组件？

常规使用Element Plus的ElDialog组件方式如下：

<template>
...
    <el-dialog :visible="isVisible" />
...
</template>

<script setup lang="ts">
import { ElDialog } from 'element-plus';

const isVisible = ref(false);
</script>

请问是否可以通过JS文件直接调用方法来显示对话框，例如：

import mywrapper from 'utils/my-libs';

function abc() {
    mywrapper.show('Title', 'Description');
}

其中mywrapper包含动态加载ElDialog的代码，该如何实现这种封装？

实现思路 #

核心是利用Vue的动态创建组件API，在调用方法时动态生成ElDialog实例并挂载到DOM，弹窗关闭后销毁组件和DOM节点，避免内存泄漏。

具体封装步骤 #

1. 创建封装工具文件（utils/my-libs.ts） #

import { createVNode, render } from 'vue';
import { ElDialog, ElButton } from 'element-plus';
import 'element-plus/dist/index.css'; // 必须引入Element Plus样式

// 定义弹窗配置类型
interface DialogOptions {
  title?: string;
  content: string;
  confirmText?: string;
  cancelText?: string;
  onConfirm?: () => void;
  onCancel?: () => void;
}

const mywrapper = {
  show(options: string | DialogOptions) {
    // 处理参数兼容：支持直接传内容字符串，或完整配置对象
    const finalOpts = typeof options === 'string' 
      ? { content: options, title: '提示' } 
      : { title: '提示', confirmText: '确定', cancelText: '取消', ...options };

    // 创建临时DOM容器
    const container = document.createElement('div');
    document.body.appendChild(container);

    // 弹窗关闭销毁逻辑
    const closeDialog = () => {
      render(null, container);
      document.body.removeChild(container);
    };

    // 创建ElDialog的虚拟节点
    const dialogVNode = createVNode(ElDialog, {
      title: finalOpts.title,
      modelValue: true,
      'onUpdate:modelValue': (visible: boolean) => {
        if (!visible) closeDialog();
      },
      width: '500px' // 可自定义默认宽度
    }, {
      // 弹窗内容插槽
      default: () => finalOpts.content,
      // 弹窗底部按钮插槽
      footer: () => [
        createVNode(ElButton, {
          onClick: () => {
            finalOpts.onCancel?.();
            closeDialog();
          }
        }, () => finalOpts.cancelText),
        createVNode(ElButton, {
          type: 'primary',
          onClick: () => {
            finalOpts.onConfirm?.();
            closeDialog();
          }
        }, () => finalOpts.confirmText)
      ]
    });

    // 渲染组件到DOM
    render(dialogVNode, container);
  }
};

export default mywrapper;

2. 调用封装好的工具 #

在任意组件或JS文件中直接使用：

import mywrapper from '@/utils/my-libs';

// 基础调用：仅传内容
function showBasicDialog() {
  mywrapper.show('这是一个基础弹窗');
}

// 自定义配置调用
function showCustomDialog() {
  mywrapper.show({
    title: '自定义标题',
    content: '这是自定义弹窗内容',
    confirmText: '确认操作',
    cancelText: '取消',
    onConfirm: () => {
      console.log('用户点击确认');
      // 可在此处添加业务逻辑
    },
    onCancel: () => {
      console.log('用户点击取消');
    }
  });
}

关键注意点 #

• 弹窗关闭时必须销毁组件并移除DOM节点，防止内存泄漏
• 必须引入Element Plus的全局样式，否则弹窗会出现样式缺失
• 支持扩展更多ElDialog属性（如top、close-on-click-modal等），只需在createVNode的props中添加对应配置

内容的提问来源于stack exchange，提问作者coure2011