From 4df0471b7dff0494625ff09969b1a13b5359a26e Mon Sep 17 00:00:00 2001
From: XingChuan <m17600301067@163.com>
Date: 星期一, 31 五月 2021 22:41:47 +0800
Subject: [PATCH] 统计表弹框UI优化；增加点击企业名称缩放至企业；二级表展示功能优化。
---
src/utils/dialogDrag.js | 85 ++++++++++++++++++++++++++++++++++++++++++
1 files changed, 84 insertions(+), 1 deletions(-)
diff --git a/src/utils/dialogDrag.js b/src/utils/dialogDrag.js
index 3c7b596..1e05409 100644
--- a/src/utils/dialogDrag.js
+++ b/src/utils/dialogDrag.js
@@ -11,7 +11,6 @@
//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) {
@@ -22,6 +21,7 @@
})()
dialogHeaderEl.onmousedown = (e) => {
+
// 榧犳爣鎸変笅锛岃绠楀綋鍓嶅厓绱犺窛绂诲彲瑙嗗尯鐨勮窛绂�
const disX = e.clientX - dialogHeaderEl.offsetLeft
const disY = e.clientY - dialogHeaderEl.offsetTop
@@ -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 姝ｅ垯鍖归厤鏇挎崲
+ 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