写在开头
嘿，各位好呀！😀
今是2025年04月30日，明天就是五一假期了，激动的心从早上就一直没有沉静过，午休的时候闭着眼半小时硬是没睡着，哎，这班是一点也上不下去。
好！说回正题，本次要分享的是关于如何在Vue中比较优雅的调用弹窗的过程，请诸君按需食用哈。
需求背景
最近，小编在捣鼓一个和低代码拖动交互类似的业务，说到低代码，大家肯定都不陌生吧❓像低代码表单、低代码图表平台等，用户可以通过简单的拖拽操作，像搭积木一样，快速"拼"出一个功能完善的表单页面，或者酷炫的数据可视化大屏。
而在这些低代码平台中，配置组件属性的交互方式通常有两种主流玩法：
其一，三栏式布局，左边是组件列表，中间是画布/预览区，右边是属性配置面板。选中中间画布的某个组件，右侧面板就自动显示它的配置项，如下：
其二，弹窗式配置，同样从左侧拖拽组件到画布，但选中组件后，通常会看到一个"设置"或"编辑"按钮。点击这个按钮，Duang~ ✨ 弹出一个专门的配置窗口 (Dialog)，让你在里面集中完成所有设置。
这两种交互各有千秋，不评判好坏哈，反正合适自己业务场景的才是最好的。
然，今天咱们重点聚焦第二种：点击按钮弹出 Dialog 进行配置的场景。
这种方式在很多场景下也很常见，比如配置项特别多、需要更沉浸式的设置体验时。
但问题也随之而来：如果平台支持的组件越来越多，这里咱们假设是低代码图表场景，如柱状图、折线图、饼图、地图、文本、图片...等等，每个组件都需要一个独立的配置弹窗...🤔，那么，我们应该如何设计一套优雅、可扩展、易维护的代码架构来管理这些层出不穷的 Dialog 呢？🤔
结构设计
万事开头难，尤其是在做一些稍微带点设计或架构意味的事情时，切忌盲目上手。心里得先有个谱，想清楚大致方向，否则等到后面业务需求像潮水般涌来，迭代压力陡增时，你就会深刻体会到早期设计不佳带来的痛苦了（别问小编是怎么知道的...😭）。
当然，如果你已是经验丰富的老司机，那就当我没说哈。😂
面对"组件点击按钮弹出配置框"这个需求，最开始，最直观的想法可能就是：一个组件配一个专属的 Dialog.vue 文件，相互独立，互不影响，挺好不是❓
比如，咱当前有柱状图、折线图、饼图三个组件，那么它们的目录结构可能是这样子的：
src/
├── components/
│ ├── BarChart/
│ │ ├── Drag.vue # 组件的拖动视图
│ │ ├── Dialog.vue # 组件的配置弹窗
│ │ └── index.js # 组件的Model
│ ├── LineChart/
│ │ ├── Drag.vue # 组件的拖动视图
│ │ ├── Dialog.vue # 组件的配置弹窗
│ │ └── index.js # 组件的Model
│ ├── PieChart/
│ │ ├── Drag.vue # 组件的拖动视图
│ │ ├── Dialog.vue # 组件的配置弹窗
│ │ └── index.js # 组件的Model
└── App.vue # 入口
咱们不详说其他文件中的代码情况，仅关注每个组件中 Dialog.vue 文件的代码要如何写❓
可能大概是这样：
<template>
<el-dialog :modelValue="modelValue">
<div>内容....</div>
</el-dialog>
</template>
<script>
defineProps({
modelValue: Boolean,
});
</script>
小编这里使用 Element-Plus 的
el-dialog组件作为案例演示。
然后，为了在页面上渲染这些不同组件的 Dialog.vue，最笨的方法可能是在父组件里面用 v-if/v-else-if 来判断， 或者高级一点使用 <component :is="currentDialog"> 再配合一堆 import 来动态加载渲染。父组件需要维护哪个弹窗应该显示的状态，以及负责传递数据和接收结果，逻辑很快变得复杂且难以维护。
在项目初期，组件类型少的时候，这种方式确实能跑通，没有问题❗
你就说它能不能跑吧，就算它不能跑，你能跑不就行😋，项目和你总有一个能跑的。
但随着业务不断迭代，支持的组件类型越来越多，这种"各自为战"的模式很快就暴露出了诸多问题，其中有两个问题比较尖锐：
- 缺乏统一控制📝：如果想给所有弹窗统一调整弹窗配置、或者添加一个水印、或者调整一下默认样式、或者增加一个通用的"重置"按钮，怎么办？只能去每个
Dialog.vue文件里手动修改，效率低下不说，还极易遗漏或出错。 - 代码冗余严重📜：每个
Dialog.vue文件里，关于弹窗的显示/隐藏逻辑、确认/取消按钮的处理、与 Element Plus (或其他 UI 库) ElDialog 组件的交互代码，几乎都是大同小异的模板代码，写到后面简直是精神污染。（这里手动Q一下我同事🔨）
总之，随着项目的迭代，这种最初看似简单的结构，维护成本越来越高，每次增加或修改一个组件的配置弹窗都成了一种"折磨"。
那么，要如何重新来设计这个架构呢❓
小编采用的是基于动态创建和静态方法关联的架构，其架构的核心理念就是：将通用的弹窗逻辑（创建、销毁、交互）抽离出来，让每个组件的配置面板（Panel）只专注于自身的配置项 UI 视图和数据处理逻辑 ，从而实现高内聚、低耦合、易扩展的目标。
先来瞅瞅目录结构的最终情况👇：
src/
├── components/
│ ├── BarChart/
│ │ ├── Dialog/
│ │ | ├── index.js # Dialog 组件的入口
│ │ | ├── Panel.vue # Dialog 组件UI视图
│ │ ├── Drag.vue
│ │ └── index.js
│ ├── LineChart/
│ │ ├── Dialog/
│ │ | ├── index.js # Dialog 组件的入口
│ │ | ├── Panel.vue # Dialog 组件UI视图
│ │ ├── Drag.vue
│ │ └── index.js
│ ├── PieChart/
│ │ ├── Dialog/
│ │ | ├── index.js # Dialog 组件的入口
│ │ | ├── Panel.vue # Dialog 组件UI视图
│ │ ├── Drag.vue
│ │ └── index.js
│ ├── BaseDialog.vue
│ └── index.js
├── utils/
│ ├── BaseControl.js
│ └── dialog.js
└── App.vue # 入口
关键变动是 Dialog.vue 变成了 Dialog/index.js 与 Dialog/Panel.vue，它们俩的作用：
Panel.vue：负责"长什么样"和"填什么数据" 。index.js：负责"怎么被调用"和"调用时带什么默认配置"，并将Panel.vue包装后提供给外部使用。
具体实现
接下来，咱们就详细拆解一下这套新架构的设计具体代码实现过程。👇
但为了更好的讲述关键代码的实现，咱们不管拖动那块逻辑，仅通过点击按钮简单的来模拟，效果如下：
本次小编是新建了一个 Vue3 的项目并且安装了 ElementPlus 进行了全局引入，基础项目环境就这样。
然后，从入口出发（App.vue）：
<template>
<el-button type="primary" v-for="type in componentList" :key="type" @click="openDialog(type)">
{{ type }}
</el-button>
</template>
<script setup>
import { ElButton } from "element-plus";
import { componentMap } from "./components"; // 引入组件映射
/** @name 实例化所有组件 **/
const componentInstanceMap = Object.keys(componentMap).reduce((pre, key) => {
const instance = new componentMap[key]();
pre[key] = instance;
return pre;
}, {});
/** @name 打开组件弹窗 **/
async function openDialog(type) {
const component = await componentMap[type].DialogComponent.create(
{ type },
componentInstanceMap[type]
);
console.log("component", component);
}
</script>
统一管理所有组件导出文件（components/index.js）：
import PieChart from "./PieChart";
import BarChart from "./BarChart";
import LineChart from "./LineChart";
export const componentMap = {
[PieChart.type]: PieChart,
[BarChart.type]: BarChart,
[LineChart.type]: LineChart,
};
/** @typedef { keyof componentMap } ComponentType */
组件入口文件（components/PieChart/index.js）：
import BaseControl from "../../utils/BaseControl";
import Drag from "./Drag.vue";
import Dialog from "./Dialog";
class Component extends BaseControl {
static type = "barChart";
label = "柱状图";
icon = "bar-chart";
getDialogDataDefault() {
return {
title: { text: "柱状图" },
tooltip: { trigger: "axis" },
};
}
static DragComponent = Drag;
static DialogComponent = Dialog;
}
export default Component;
该文件用于集中管理组件的核心数据结构与统一的业务逻辑。
咱们以柱状图为例哈。📊
所有组件的基类文件（utils/BaseControl.js）：
/** @typedef { import('vue').Component|import('vue').ConcreteComponent } VueConstructor */
export default class BaseControl {
/** @name 组件唯一标识 **/
type = "baseControl";
/** @name 组件label **/
label = "未知组件";
/** @name 组件高度 **/
height = "110px";
constructor() {
if (this.constructor.type) {
this.type = this.constructor.type;
}
}
/**
* @name 拖动组件
* @type { VueConstructor | null }
*/
static DragComponent = null;
/**
* @name 弹窗组件
* @type { VueConstructor | null }
*/
static DialogComponent = null;
dialog = {};
/**
* @name 用于获取Dialog组件的默认数据
* @returns {Dialog} 默认数据
*/
getDialogDataDefault() {
return {};
}
}
该文件是所有组件的"基石"🏛️，每个具体的图表组件都继承自 BaseControl 类，并在该基础上定义自己特有的信息和逻辑。
组件的拖动视图组件（Drag.vue），这个可以先随便整一个，暂时用不上：
<template>
<div>某某组件的拖动视图组件</div>
</template>
Dialog 组件的入口文件（components/BarChart/Dialog/index.js）:
import Panel from "./Panel.vue"; // Dialog 的 UI 视图组件
import { dialogWithComponent } from "../../../utils/dialog.js";
/**
* @name 静态方法，渲染Dialog组件，并且可在此处自定义dialog组件的props
* @param {{ component: object, instance: object, componentDataAll: Array<object> }} contentProps 组件数据
* @returns {Promise<any>}
*/
Panel.create = async (panelProps = {}) => {
return dialogWithComponent((render) => render(Panel, panelProps), {
title: panelProps.label,
width: "400px",
});
};
export default Panel;
该文件导入真正的 UI 视图面板（Panel.vue），然后给组件挂载了一个静态 create 方法。这个 create 方法用于动态创建 Dialog 组件，它内部调用 dialogWithComponent 方法，并可以在此处预设一些该 Dialog 组件特有的配置（如默认标题、宽度）。
Dialog 组件的 Panel.vue 文件：
<template>
<h1>柱状图的配置</h1>
</template>
<script setup>
defineExpose({
async getValue() {
await new Promise((resolve) => {
setTimeout(() => {
resolve();
}, 1000);
});
return { type: "barChart" };
}
})
</script>
该组件仅放置柱状图特有的配置信息，并且不需要管弹窗自身的逻辑行为，很干净很专注😎。还有，它内部必须对外提供一个 getValue 方法❗用于在用户点击确认时调用，以获取最终的配置数据。
核心工具函数（utils/dialog.js）文件 :
import { createApp, h, ref } from "vue";
import { ElDialog, ElMessage } from "element-plus";
import BaseDialog from "../components/BaseDialog.vue";
/**
* @name 协助统一创建dialog组件，并且进行挂载、销毁、上报
* @param {import('vue').Component|Function} ContentComponent 渲染的组件
* @param {import('element-plus').dialogProps} dialogProps dialog组件的props
* @returns {Promise<any>}
*/
export function dialogWithComponent(ContentComponent, dialogProps = {}) {
return new Promise((resolve) => {
/** @name 挂载容器 */
const container = document.createElement("div");
document.body.appendChild(container);
/** @name dialog组件实例 */
let vm = null;
/** @name dialog组件loading */
let loading = ref(false);
const dialogRef = ref(null);
const contentRef = ref(null);
const unmount = () => {
if (vm) {
vm.unmount();
vm = null;
}
document.body.removeChild(container);
};
const confirm = async () => {
let result = {};
const instance = contentRef.value;
if (instance && instance.getValue) {
loading.value = true;
try {
result = await instance.getValue();
} catch (error) {
typeof error === "string" && ElMessage.error(error);
loading.value = false;
return;
}
loading.value = false;
}
unmount();
resolve(result);
};
// 创建dialog组件实例
vm = createApp({
render() {
return h(
BaseDialog,
{
ref: dialogRef,
modelValue: true,
loading: loading.value,
onDialogConfirm() {
confirm();
},
onDialogCancel() {
unmount();
},
...dialogProps,
},
{
default: () => createVNode(h, ContentComponent, contentRef),
},
);
},
});
// 挂载dialog组件
vm.mount(container);
});
}
/**
* @name 创建一个 VNode 实例
* @param {import('vue').CreateElement} h Vue 的 createElement 函数
* @param {import('vue').Component|Function} Component 渲染的组件或渲染函数
* @param {string} key VNode 的 key
* @param {import('vue').Ref} ref 组件引用
* @returns {import('vue').VNode|null} 返回 VNode 实例或 null
*/
export function createVNode(h, Component, ref = null) {
if (!Component) return null;
/** @type { import('vue').VNode } */
let instance = null;
/** @name 升级h函数，统一混入ref **/
const render = (type, props = {}, children) => {
return h(
type,
{
...props,
ref: (el) => {
if (ref) ref.value = el;
},
},
children,
);
};
if (typeof Component === "function") {
instance = Component(render);
} else {
instance = render(Component);
}
return instance;
}
dialogWithComponent 这个函数是整个架构的核心！它的职责就像一个专业的 Dialog "召唤师"：
脑袋突然蹦出一句话："去吧，就决定是你了，皮卡丘（柱状图）"🎯
- 动态创建：不再需要在模板里预先写好
<el-dialog>。dialogWithComponent会在你需要的时候，通过createApp和h函数，动态地创建一个包含<el-dialog>和你的内容组件的 Vue 应用实例。 - 挂载与销毁：它负责将创建的 Dialog 实例挂载到
document.body上，并在 Dialog 关闭（确认、取消或点击遮罩层）后，优雅地将其从 DOM 中移除并销毁 Vue 实例，避免内存泄漏。 - Promise 驱动：调用
dialogWithComponent会返回一个 Promise。当用户点击"确认"并成功获取数据后，Promise 会调用 resolve 并返回数据；如果用户点击"取消"或"关闭"，Promise 会调用 reject 。这使得异步处理 Dialog 结果变得异常简洁，并且支持异步。 - 配置注入：你可以轻松地向
dialogWithComponent传递<el-dialog>的各种props，实现 Dialog 的定制化。
createVNode 这个函数是 Vue 中 h 函数的升级版本，它主要是帮忙做内容的渲染🎩，它有两个小小的特点：
- 组件/函数通吃：你可以直接传递一个 Vue 组件 (
.vue文件或 JS/TS 对象) 给它，它会用h函数渲染这个组件。你还可以传递一个渲染函数！能让你在运行时动态决定渲染什么内容，简直不要太方便！是吧是吧。🤩 Ref传递：它巧妙地集中处理了ref，使得dialogWithComponent函数可以获取到内容组件的实例 (contentRef.value)，从而能够调用内容组件暴露的方法（getValue），非常关键的一点。⏰
基础的 Dialog 组件文件（components/BaseDialog.vue）：
<template>
<el-dialog v-bind="dialogAttrs">
<slot></slot>
<template v-if="showFooter" #footer>
<span>
<template v-if="!$slots.footer">
<el-button @click="handleCancel">取消</el-button>
<el-button type="primary" :loading="loading" @click="handleConfirm">确定</el-button>
</template>
<slot v-else name="footer"></slot>
</span>
</template>
</el-dialog>
</template>
<script setup>
import { useAttrs, computed } from "vue";
import { ElDialog, ElButton } from "element-plus";
defineProps({
showFooter: {
type: Boolean,
default: true,
},
loading: {
type: Boolean,
default: false,
}
});
const emit = defineEmits(["dialogCancel", "dialogConfirm"]);
const attrs = useAttrs();
const dialogAttrs = computed(() => ({
...attrs,
}));
function handleCancel() {
emit("dialogCancel");
}
function handleConfirm() {
emit("dialogConfirm");
}
</script>
那么，整个核心代码的实现过程大概就是如此了。不知道你看完这部分的拆解，是否有了新的收获呢？😋
当然啦，在实际的业务场景中，代码的组织和细节处理会更加复杂，比如会涉及到更精细的状态管理、错误处理、权限控制、以及各种边界情况的兼容等等。这里为了突出咱们动态创建 Dialog 架构的核心思想，小编仅仅是把最关键的脉络拎了出来，并进行了一定程度的精简。
总结
总而言之，言而总之，这次架构的演进，给小编最大的感受就是🏗️从"各自为战"到"统一调度"。
告别了维护繁琐、数量庞大的单个 Dialog.vue 文件，转而拥抱了基于 createApp 和 h 函数的动态创建方式。
这种新模式下，基础 Dialog、配置面板 ( Panel.vue )、以及调用逻辑各司其职，实现了真正的高内聚、低耦合。最终使得整个项目结构更加清晰、代码更加健壮，也极大地提升了后续的可维护性。希望这套方案能给你带来一些启发！
最后，如果你有任何疑问或者更好的想法，随时欢迎交流哦！👇
至此，本篇文章就写完啦，撒花撒花。
