Vue.js 实现可拖动且防止超出页面边界的弹框组件

在移动弹框时，需要判断弹框是否超出了页面的上下左右边界，如果超出了需要做一些处理，防止弹框被隐藏或者出现滚动条。可以在移动弹框的时候，通过判断弹框的位置和大小，来计算出弹框的四个边界位置，然后再与页面的四个边界位置进行比较，如果超出了页面的边界，就需要调整弹框的位置和大小，使其不会被隐藏或者出现滚动条。/n/n具体实现可以在moveDown函数中添加如下代码：/n/njavascript/nconst moveDown = (e) => {/n // 鼠标按下，计算当前元素距离可视区的距离/n const disX = e.clientX - dialogHeaderEl.offsetLeft;/n const disY = e.clientY - dialogHeaderEl.offsetTop;/n/n // 获取到的值带px 正则匹配替换/n let styL;/n let styT;/n/n // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px/n if (sty.left.includes('%')) {/n styL = +document.body.clientWidth * (+sty.left.replace(/%/g, '') / 100);/n styT = +document.body.clientHeight * (+sty.top.replace(/%/g, '') / 100);/n } else {/n styL = +sty.left.replace(//px/g, '');/n styT = +sty.top.replace(//px/g, '');/n } /n document.onmousemove = function (e) {/n // 通过事件委托，计算移动的距离/n const l = e.clientX - disX;/n const t = e.clientY - disY;/n/n // 计算弹框的四个边界位置/n const dialogWidth = dragDom.offsetWidth;/n const dialogHeight = dragDom.offsetHeight;/n const screenWidth = document.body.clientWidth;/n const screenHeight = document.body.clientHeight;/n const maxLeft = screenWidth - dialogWidth;/n const maxTop = screenHeight - dialogHeight;/n/n // 判断弹框是否超出了页面的边界/n let left = l + styL;/n let top = t + styT;/n if (left < 0) {/n left = 0;/n }/n if (left > maxLeft) {/n left = maxLeft;/n }/n if (top < 0) {/n top = 0;/n }/n if (top > maxTop) {/n top = maxTop;/n }/n/n // 移动当前元素/n dragDom.style.left = `${left}px`;/n dragDom.style.top = `${top}px`;/n };/n/n document.onmouseup = function (e) {/n document.onmousemove = null;/n document.onmouseup = null;/n };/n};/n/n/n在这里，我们通过计算弹框的四个边界位置，然后判断弹框是否超出了页面的边界，如果超出了，就调整弹框的位置，使其不会被隐藏或者出现滚动条。