自定义指令el-dialog的放大缩小vue3+element-plus

### 创建自定义指令实现 `el-dialog` 缩放功能 为了实现在 Vue 3 和 Element Plus 中创建自定义指令以支持 `el-dialog` 组件的缩放功能，可以遵循以下方法： #### 自定义指令设计思路 通过绑定自定义指令到 `.el-dialog__wrapper` 或者特定于对话框的内容区域，允许用户点击并拖动指定的手柄（通常是四角之一）来改变对话框尺寸。考虑到用户体验和交互逻辑，需确保当用户在特殊 HTML 元素上释放鼠标按钮时仍能正常结束拖拽操作[^1]。 #### 关键点处理 - **样式调整**：移除默认设置中的 `right` 和 `bottom` 属性，仅保留 `left` 和 `top` 来定位对话框的位置。 - **边界检测**：保证用于触发拖拽行为的元素始终位于视口内可见范围之内，防止因超出屏幕而造成不良体验。 - **解决 onmouseup 失效问题**：针对某些情况下无法捕获 `onmouseup` 事件的问题，可以通过监听全局文档级别的 `mouseup` 事件作为替代方案，从而确保即使是在非标准元素处松开鼠标也能正确终止当前的操作流程。 #### 实现代码示例 下面是一个简单的例子展示如何利用 Vue 3 的 Composition API 结合自定义指令完成上述需求： ```javascript import { DirectiveBinding } from 'vue'; export default { mounted(el: HTMLElement, binding: DirectiveBinding) { let startX = 0; let startY = 0; let startWidth = 0; let startHeight = 0; const resizeHandler = (e: MouseEvent) => { e.preventDefault(); // 更新宽度高度 el.style.width = `${startWidth + e.clientX - startX}px`; el.style.height = `${startHeight + e.clientY - startY}px`; // 设置最大最小宽高限制 if(parseInt(el.style.width)<200){ el.style.width='200px' } if(parseInt(el.style.height)<200){ el.style.height='200px' } // 发布更新后的尺寸给父组件或其他地方使用 binding.value && typeof binding.value === "function" && binding.value({ width: parseInt(el.style.width), height: parseInt(el.style.height)}); }; const mouseUpHandler = () => { document.removeEventListener('mousemove', resizeHandler); document.removeEventListener('mouseup', mouseUpHandler); }; const handleMouseDown = (event: MouseEvent) => { startX = event.clientX; startY = event.clientY; startWidth = parseFloat(getComputedStyle(el).width.replace('px','')); startHeight = parseFloat(getComputedStyle(el).height.replace('px','')); // 添加移动和抬起事件监听器至整个document对象 document.addEventListener('mousemove', resizeHandler); document.addEventListener('mouseup', mouseUpHandler); // 阻止冒泡影响其他元素 event.stopPropagation(); }; // 将mousedown事件绑定到目标元素上 el.querySelector('.resize-handle')?.addEventListener('mousedown', handleMouseDown); // 移除原有样式中可能干扰布局的属性 Object.assign(el.style,{ position:'absolute', right:'unset',// 只保留left/top两个方向上的绝对定位 bottom:'unset'// 同理取消底部固定 }); }, }; ``` 此段代码展示了如何构建一个能够响应鼠标的按下、移动以及释放动作来自由调节 `el-dialog` 对话框大小的功能模块。需要注意的是实际应用过程中还需要考虑更多细节如动画过渡效果的支持等。