Vue.js 弹框拖拽功能实现限制上下左右边界

在使用 Vue.js 实现弹框拖拽功能时，为了防止弹框拖拽超出页面边界，我们需要限制弹框的拖拽范围。以下代码演示如何在 moveDown 函数中添加代码来限制弹框拖拽的边界：/n/njavascript/nexport default {/n bind(el, binding, vnode, oldVnode) {/n //弹框可拉伸最小宽高/n const minWidth = 400;/n const minHeight = 300;/n/n //初始非全屏/n let isFullScreen = true;/n/n //当前宽高/n let nowWidth = 0;/n let nowHight = 0;/n/n //当前顶部高度/n let nowMarginTop = 0;/n/n //获取弹框头部（这部分可双击全屏）/n const dialogHeaderEl = el.querySelector('.el-dialog__header');/n /n/n //弹窗/n const dragDom = el.querySelector('.el-dialog');/n/n //给弹窗加上overflow auto；不然缩小时框内的标签可能超出dialog；/n dragDom.style.overflow = 'auto';/n/n //清除选择头部文字效果/n //dialogHeaderEl.onselectstart = new Function(/'return false/');/n/n //头部加上可拖动cursor/n dialogHeaderEl.style.cursor = 'move';/n/n // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);/n const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);/n/n const 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/n const maxX = document.body.clientWidth - dragDom.offsetWidth; //最大横向移动距离/n const maxY = document.body.clientHeight - dragDom.offsetHeight; //最大纵向移动距离/n document.onmousemove = function (e) {/n let left = e.clientX - disX;/n let top = e.clientY - disY;/n left = left < 0 ? 0 : left;/n left = left > maxX ? maxX : left;/n top = top < 0 ? 0 : top;/n top = top > maxY ? maxY : top;/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 dialogHeaderEl.onmousedown = moveDown;/n/n // 双击头部全屏效果/n dialogHeaderEl.ondblclick = (e) => {/n if (isFullScreen) {/n nowHight = dragDom.clientHeight;/n nowWidth = dragDom.clientWidth;/n nowMarginTop = dragDom.style.marginTop;/n dragDom.style.height = '768px';/n dragDom.style.width = '1024px';/n dragDom.style.marginTop = '15vh';/n isFullScreen = false;/n dialogHeaderEl.style.cursor = 'initial';/n // dialogHeaderEl.onmousedown = null;/n document.onmousemove = function (e) {/n // 通过事件委托，计算移动的距离/n const l = e.clientX - disX;/n const t = e.clientY - disY;/n /n // 移动当前元素/n dragDom.style.left = `${l + styL}px`;/n dragDom.style.top = `${t + styT}px`;/n /n //将此时的位置传出去/n //binding.value({x:e.pageX,y:e.pageY})/n };/n /n document.onmouseup = function (e) {/n document.onmousemove = null;/n document.onmouseup = null;/n };/n /n /n } else {/n dragDom.style.removeProperty('width')/n dragDom.style.removeProperty('height')/n dragDom.style.removeProperty('margin-top')/n isFullScreen = true;/n dialogHeaderEl.style.cursor = 'move';/n dialogHeaderEl.onmousedown = moveDown;/n }/n };/n },/n/n};/n/n/n以上代码中，我们首先获取了页面和弹框的尺寸，并计算出弹框可以移动的最大距离。在 document.onmousemove 中，我们对 left 和 top 值进行限制，确保它们不超过最大移动距离。这样就实现了限制弹框拖拽超出页面边界的功能。/n/n通过以上方法，您可以轻松实现 Vue.js 弹框拖拽功能，并确保弹框始终在页面可视范围内，提升用户体验。/n