Vue 弹框拖动组件：实现可拉伸、全屏切换和边界限制

Vue 弹框拖动组件：实现可拉伸、全屏切换和边界限制/n/n本文将介绍一个 Vue 弹框组件，实现可拖动、拉伸、全屏切换功能，并提供边界限制，避免弹窗超出页面范围。/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 document.onmousemove = function (e) {/n // 通过事件委托，计算移动的距离/n const l = e.clientX - disX;/n const t = e.clientY - disY;/n// 计算弹框的四个边界位置/nconst dialogWidth = dragDom.offsetWidth;/nconst dialogHeight = dragDom.offsetHeight;/nconst screenWidth = document.body.clientWidth;/nconst screenHeight = document.body.clientHeight;/nconst maxLeft = screenWidth - dialogWidth;/nconst maxTop = screenHeight - dialogHeight;/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在计算弹框位置时，加上一个判断，当弹框与页面边缘的距离小于一个阈值时，将弹框位置设置为页面边缘的位置。例如：/n/nconst threshold = 10; // 边缘吸附的距离阈值/nif (left < threshold) {/n  left = 0;/n} else if (left > maxLeft - threshold) {/n  left = maxLeft;/n}/nif (top < threshold) {/n  top = 0;/n} else if (top > maxTop - threshold) {/n  top = maxTop;/n}/n/n这样就可以避免弹框过于靠近页面边缘时出现的吸附效果。/n };/n/n // 鼠标松开，移除移动事件/n document.onmouseup = function () {/n document.onmousemove = null;/n document.onmouseup = null;/n };/n };/n/n // 鼠标按下事件/n dialogHeaderEl.onmousedown = moveDown;/n }/n};/n/n/n实现的功能:/n/n* 可拖动: 用户可以点击弹框头部拖动弹窗到任意位置/n* 可拉伸: 用户可以点击弹框右下角进行拉伸/n* 全屏切换: 用户双击弹框头部可以进行全屏切换/n* 边界限制: 弹窗不会超出页面边界/n/n代码说明:/n/n* moveDown 函数监听鼠标按下事件，并计算当前弹窗位置/n* document.onmousemove 函数监听鼠标移动事件，根据鼠标移动距离更新弹窗位置/n* document.onmouseup 函数监听鼠标松开事件，移除鼠标移动和松开事件监听/n* 代码中使用了 currentStyle 和 getComputedStyle 获取弹窗的当前样式/n* 通过计算弹窗的四个边界位置，判断弹窗是否超出页面边界，并进行相应的调整/n/n注意:/n/n* 代码中使用了一些 CSS 类名，例如 .el-dialog__header 和 .el-dialog，需要根据你的实际情况进行修改/n* 可以根据需求添加其他功能，例如弹窗大小限制、动画效果等/n/n希望本文能帮助你实现一个功能强大的 Vue 弹框组件。', 'content': '## Vue 弹框拖动组件：实现可拉伸、全屏切换和边界限制/n/n本文将介绍一个 Vue 弹框组件，实现可拖动、拉伸、全屏切换功能，并提供边界限制，避免弹窗超出页面范围。/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 document.onmousemove = function (e) {/n // 通过事件委托，计算移动的距离/n const l = e.clientX - disX;/n const t = e.clientY - disY;/n// 计算弹框的四个边界位置/nconst dialogWidth = dragDom.offsetWidth;/nconst dialogHeight = dragDom.offsetHeight;/nconst screenWidth = document.body.clientWidth;/nconst screenHeight = document.body.clientHeight;/nconst maxLeft = screenWidth - dialogWidth;/nconst maxTop = screenHeight - dialogHeight;/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在计算弹框位置时，加上一个判断，当弹框与页面边缘的距离小于一个阈值时，将弹框位置设置为页面边缘的位置。例如：/n/nconst threshold = 10; // 边缘吸附的距离阈值/nif (left < threshold) {/n  left = 0;/n} else if (left > maxLeft - threshold) {/n  left = maxLeft;/n}/nif (top < threshold) {/n  top = 0;/n} else if (top > maxTop - threshold) {/n  top = maxTop;/n}/n/n这样就可以避免弹框过于靠近页面边缘时出现的吸附效果。/n };/n/n // 鼠标松开，移除移动事件/n document.onmouseup = function () {/n document.onmousemove = null;/n document.onmouseup = null;/n };/n };/n/n // 鼠标按下事件/n dialogHeaderEl.onmousedown = moveDown;/n }/n};/n/n/n实现的功能:/n/n* 可拖动: 用户可以点击弹框头部拖动弹窗到任意位置/n* 可拉伸: 用户可以点击弹框右下角进行拉伸/n* 全屏切换: 用户双击弹框头部可以进行全屏切换/n* 边界限制: 弹窗不会超出页面边界/n/n代码说明:/n/n* moveDown 函数监听鼠标按下事件，并计算当前弹窗位置/n* document.onmousemove 函数监听鼠标移动事件，根据鼠标移动距离更新弹窗位置/n* document.onmouseup 函数监听鼠标松开事件，移除鼠标移动和松开事件监听/n* 代码中使用了 currentStyle 和 getComputedStyle 获取弹窗的当前样式/n* 通过计算弹窗的四个边界位置，判断弹窗是否超出页面边界，并进行相应的调整/n/n注意:/n/n* 代码中使用了一些 CSS 类名，例如 .el-dialog__header 和 .el-dialog，需要根据你的实际情况进行修改/n* 可以根据需求添加其他功能，例如弹窗大小限制、动画效果等/n/n希望本文能帮助你实现一个功能强大的 Vue 弹框组件。', 'keywords': 'Vue, 弹框, 拖动, 拉伸, 全屏, 边界限制, 组件