Vue Modal 通过默认插槽、具名插槽和作用域插槽实现全方位自定义，结合 Teleport 确保 DOM 隔离与样式可控，核心是解耦结构与内容。
Vue.js 中通过 Slots 实现模态框（Modal）的全方位自定义，核心在于解耦结构与内容，让 Modal 组件只负责控制显隐、遮罩、动画和基础交互逻辑，而标题、主体、底部按钮等全部交由使用者决定。
默认插槽承载主体内容，灵活渲染任意结构
在 Modal 组件中使用 <slot></slot> 作为内容占位符，父组件可直接传入 HTML、组件甚至带状态的表单：
- 不写 name 的
<slot></slot>对应默认插槽，适合放主要业务区域（如表单、提示文案、图片预览等） - 支持响应式数据绑定和事件监听，比如在插槽内用
@click="submit"或v-model都能正常工作 - 避免在 Modal 内部硬编码 body 标签或 class，把样式和语义完全交给使用者更可控
具名插槽精细化控制头部、底部等固定区域
为提升定制自由度，可在 Modal 中定义多个具名插槽，例如：
-
<slot name="header"></slot>：用于自定义标题栏，可插入带关闭按钮的 div、带 icon 的 h2，甚至支持拖拽句柄 -
<slot name="footer"></slot>：替代固定“确定/取消”按钮，适配不同场景（如“保存并继续”、“跳过此步”、“上传中…”） - 搭配
v-if或作用域插槽，还能根据 props 动态决定是否显示某块区域（如仅编辑态显示 footer）
作用域插槽传递内部状态，实现双向可控交互
当父组件需要感知 Modal 内部状态（如加载中、校验结果），可用作用域插槽暴露数据与方法：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
立即学习“前端免费学习笔记（深入）”；
- 在 Modal 模板中写：
<slot name="footer" :loading="isLoading" :close="close"></slot> - 父组件使用时：
<template loading close><button :disabled="loading">提交</button></template> - 这样既保持 Modal 封装性，又让调用方掌握按钮行为细节，避免因封装过度导致逻辑僵化
结合 Teleport 实现真实 DOM 层级隔离，避免样式污染
Modal 常需挂载到 下以突破父级 overflow: hidden 或 z-index 限制：
- 用
<teleport to="body"><div class="modal">...</div></teleport>确保渲染位置正确 - 配合
v-show控制显隐，比v-if更利于过渡动画和插槽内容复用 - 注意在 Teleport 内部仍要保留插槽声明，否则内容不会被正确分发到目标节点
Slots 不是语法糖，而是 Vue 组件设计思想的体现——让容器专注流程，内容交给使用者。一个真正好用的 Modal，不是功能堆砌，而是留白得当、扩展清晰、边界分明。
