From 9cf09818be0c2db5070a5b1342ca46d9e6497fad Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期日, 25 四月 2021 10:36:09 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/utils/dialogDrag.js | 83 +++++++++++++++++++++++++++++++++++++++++ 1 files changed, 83 insertions(+), 0 deletions(-) diff --git a/src/utils/dialogDrag.js b/src/utils/dialogDrag.js index 466f856..1e05409 100644 --- a/src/utils/dialogDrag.js +++ b/src/utils/dialogDrag.js @@ -82,3 +82,86 @@ } } }) + +// v-dialogDrag: 寮圭獥鎷栨嫿灞炴�� +Vue.directive('dialogDragBottom', { + bind (el, binding, vnode, oldVnode) { + const dialogHeaderEl = el.querySelector('.el-dialog__header') + const dragDom = el.querySelector('.el-dialog') + // dialogHeaderEl.style.cursor = 'move'; + dialogHeaderEl.style.cssText += ';cursor:move;' + //console.log(dragDom.style.cssText) + //dragDom.style.cssText += ';top:0px;' + dragDom.style.cssText = 'bottom:15px;' + // 鑾峰彇鍘熸湁灞炴�� ie dom鍏冪礌.currentStyle 鐏嫄璋锋瓕 window.getComputedStyle(dom鍏冪礌, null); + const sty = (function () { + if (window.document.currentStyle) { + return (dom, attr) => dom.currentStyle[attr] + } else { + return (dom, attr) => getComputedStyle(dom, false)[attr] + } + })() + + dialogHeaderEl.onmousedown = (e) => { + + // 榧犳爣鎸変笅锛岃绠楀綋鍓嶅厓绱犺窛绂诲彲瑙嗗尯鐨勮窛绂� + const disX = e.clientX - dialogHeaderEl.offsetLeft + const disY = e.clientY - dialogHeaderEl.offsetTop + + const screenWidth = document.body.clientWidth // body褰撳墠瀹藉害 + const screenHeight = document.documentElement.clientHeight // 鍙鍖哄煙楂樺害(搴斾负body楂樺害锛屽彲鏌愪簺鐜涓嬫棤娉曡幏鍙�) + + const dragDomWidth = dragDom.offsetWidth // 瀵硅瘽妗嗗搴� + const dragDomheight = dragDom.offsetHeight // 瀵硅瘽妗嗛珮搴� + + const minDragDomLeft = dragDom.offsetLeft + const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth + + const minDragDomTop = dragDom.offsetTop + const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight + + // 鑾峰彇鍒扮殑鍊煎甫px 姝e垯鍖归厤鏇挎崲 + let styL = sty(dragDom, 'left') + let styT = sty(dragDom, 'top') + + // 娉ㄦ剰鍦╥e涓� 绗竴娆¤幏鍙栧埌鐨勫�间负缁勪欢鑷甫50% 绉诲姩涔嬪悗璧嬪�间负px + if (styL.includes('%')) { + styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100) + styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100) + } else { + styL = +styL.replace(/\px/g, '') + styT = +styT.replace(/\px/g, '') + }; + + document.onmousemove = function (e) { + // 閫氳繃浜嬩欢濮旀墭锛岃绠楃Щ鍔ㄧ殑璺濈 + let left = e.clientX - disX + let top = e.clientY - disY + + // 杈圭晫澶勭悊 + if (-(left) > minDragDomLeft) { + left = -(minDragDomLeft) + } else if (left > maxDragDomLeft) { + left = maxDragDomLeft + } + + if (-(top) > minDragDomTop) { + top = -(minDragDomTop) + } else if (top > maxDragDomTop) { + top = maxDragDomTop + } + + // 绉诲姩褰撳墠鍏冪礌 + //dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;` + dragDom.style.cssText = `;left:${left + styL}px;top:${top + styT}px;` + //console.log(left , styL,top , styT) + } + + document.onmouseup = function (e) { + document.onmousemove = null + document.onmouseup = null + } + } + } +}) + -- Gitblit v1.8.0