element el-dialog二次封装

### 如何实现 Element UI `el-dialog` 组件的二次封装 #### 使用 `useDialog` Hook 实现更灵活的弹窗组件 为了使 `el-dialog` 更加灵活和易于使用，可以利用 Vue 的组合式 API 创建一个名为 `useDialog` 的 Hook 来简化逻辑处理。这种方式不仅提高了代码复用率还增强了组件间的解耦合度。 ```javascript import { ref, reactive } from 'vue'; function useDialog(defaultProps = {}) { const visible = ref(false); const props = reactive({ ...defaultProps, visible: false }); function open(options) { Object.assign(props, options || {}); visible.value = true; } function close() { visible.value = false; } return { visible, props, open, close }; } ``` 当需要展示对话框时调用 `open()` 方法传入配置项；关闭则调用 `close()`[^1]。 #### 替换特定类名与挂载对象以适应不同场景 对于不同的业务需求可能涉及到修改默认样式或是行为上的调整，在这种情况下只需要更改 JavaScript 中获取到的相关 class 名字以及对应的 DOM 节点即可完成定制化操作而无需改动原有结构[^2]。 #### 自定义指令支持拖拽功能 为了让 `el-dialog` 支持拖拽效果可以在模板里加入自定义属性 `v-draggable` 并配合 CSS 设置防止意外选中文本内容： ```html <template> <div> <el-dialog v-model="dialogVisible" title="可拖拽对话框" width="50%" :close-on-click-modal="false" v-draggable > <p>拖拽标题栏移动对话框！</p> </el-dialog> <el-button @click="dialogVisible = true">打开对话框</el-button> </div> </template> <script setup> import {ref} from "vue"; const dialogVisible = ref(false); // 定义 draggable 指令... </script> <style scoped> /* 防止选中标题文字 */ .el-dialog__header { user-select: none; } </style> ``` 这里的关键在于实现了简单的拖动交互体验的同时保持了良好的用户体验设计原则[^3]。 #### 解决样式差异问题 考虑到实际开发过程中可能会遇到的需求变化或者视觉风格的要求不一致等问题，通过对 element-ui 原生组件做一层薄薄的包装能够很好地满足这些特殊场合下的应用诉求。具体做法就是基于官方提供的基础版本之上再做一些个性化的修饰工作，最后借助于 Vue 提供的强大工具链——如插件机制、全局注册等方式将其融入整个项目体系之中[^4]。