el-dialog自定义的限制拖拽出界

### 解决方案 为了防止 `el-dialog` 组件在自定义拖拽过程中超出页面边界，可以采用监听鼠标移动事件并计算对话框位置的方法来动态调整其坐标。具体实现如下： #### HTML 部分 ```html <template> <el-dialog :visible.sync="dialogVisible" @mousedown.native="handleMouseDown"> <!-- 对话框内容 --> </el-dialog> </template> ``` #### JavaScript 方法部分 通过 Vue 实例中的方法绑定鼠标的按下、移动以及释放事件。 当检测到用户点击了 `.el-dialog__header` 或者其他指定区域时触发拖动逻辑，在此期间不断更新 dialog 的 top 和 left 属性值以保持在其可视区域内[^1]。 ```javascript export default { data() { return { dialogVisible: false, startX: 0, startY: 0, startLeft: 0, startTop: 0, isDragging: false, }; }, methods: { handleMouseDown(event) { const target = event.target; // 判断是否是在头部触发的事件 if (target.closest('.el-dialog__header')) { this.startX = event.clientX; this.startY = event.clientY; let rect = document.querySelector('.el-dialog').getBoundingClientRect(); this.startLeft = rect.left; this.startTop = rect.top; this.isDragging = true; window.addEventListener('mousemove', this.handleMouseMove); window.addEventListener('mouseup', this.handleMouseUp); } }, handleMouseMove(event) { if (!this.isDragging) return; let newX = this.startLeft + (event.clientX - this.startX); let newY = this.startTop + (event.clientY - this.startY); // 获取窗口尺寸 var winWidth = window.innerWidth || document.documentElement.clientWidth || document.body.offsetWidth; var winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.offsetHeight; // 计算最大最小范围 var maxRight = winWidth - parseInt(getComputedStyle(document.querySelector('.el-dialog')).width); var maxBottom = winHeight - parseInt(getComputedStyle(document.querySelector('.el-dialog')).height); // 边界控制 newX = Math.max(0, Math.min(newX, maxRight)); newY = Math.max(0, Math.min(newY, maxBottom)); document.querySelector('.el-dialog').style.transform = `translate(${newX}px, ${newY}px)`; }, handleMouseUp() { this.isDragging = false; window.removeEventListener('mousemove', this.handleMouseMove); window.removeEventListener('mouseup', this.handleMouseUp); } } } ``` 上述代码实现了对 `el-dialog` 拖拽边界的限制功能，确保即使用户尝试将对话框移至屏幕边缘之外也不会发生越界现象。