gyyg-components 0.3.10 → 0.3.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gyyg-components",
-  "version": "0.3.10",
+  "version": "0.3.11",
   "private": false,
   "main": "lib/gyyg-components.umd.js",
   "scripts": {

package/src/components/MECDescriptions/MECDescriptions.vue

@@ -163,6 +163,7 @@ export default {
 
 /deep/ .el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
     white-space: pre-wrap;
+    vertical-align: top;
 }
 
 /deep/ .el-progress-bar {

package/src/components/MecDialog/MecDialog.vue

@@ -18,7 +18,6 @@
       @close="closeMethod"
       :destroy-on-close="destroyOnClose"
       :modal='modal'
-      :style="'height:' + height"
     >
       <div slot="title" style="font-size: 16px; color: #303133;">
         <el-icon :class="titleIcon" style="color: #1890ff; font-size: 18px;margin-right: 5px;"></el-icon>
@@ -229,12 +228,16 @@ export default {
     }
   }
 }
-/deep/ .el-dialog {
-  height: 100%;
-}
+
 .shan-maintenance-dialog {
     /deep/ .el-dialog {
         height: 90%;
     }
 }
+/deep/ .el-dialog {
+  height: 100%;
+}
+/deep/ .el-dialog {
+  height: v-bind(height); /* 动态绑定 height */
+}
 </style>

package/src/directive/el-drag-dialog/drag.js

@@ -1,64 +1,71 @@
 export default {
   bind(el, binding, vnode) {
-    const dialogHeaderEl = el.querySelector('.el-dialog__header')
-    const dragDom = el.querySelector('.el-dialog')
-    dialogHeaderEl.style.cssText += ';cursor:move;'
+    const dialogHeaderEl = el.querySelector('.el-dialog__header');
+    const dragDom = el.querySelector('.el-dialog');
+    
+    // 设置鼠标样式为可移动
+    dialogHeaderEl.style.cssText += ';cursor:move;';
 
-    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
+    // 获取元素样式兼容方法
     const getStyle = (function() {
       if (window.document.currentStyle) {
-        return (dom, attr) => dom.currentStyle[attr]
+        return (dom, attr) => dom.currentStyle[attr];
       } else {
-        return (dom, attr) => getComputedStyle(dom, false)[attr]
+        return (dom, attr) => getComputedStyle(dom, false)[attr];
       }
-    })()
+    })();
 
     dialogHeaderEl.onmousedown = (e) => {
-      // 鼠标按下，计算当前元素距离可视区的距离
-      const disX = e.clientX - dialogHeaderEl.offsetLeft
-      const disY = e.clientY - dialogHeaderEl.offsetTop
+      // 鼠标按下时，计算当前元素距离可视区的距离
+      const disX = e.clientX - dialogHeaderEl.offsetLeft;
+      const disY = e.clientY - dialogHeaderEl.offsetTop;
+      console.log(disX, disY)
 
-      // 获取到的值带px 正则匹配替换
-      let styL = getStyle(dragDom, 'left')
-      let styT = getStyle(dragDom, 'top')
+      // 获取初始位置样式
+      let styL = getStyle(dragDom, 'left');
+      let styT = getStyle(dragDom, 'top');
 
+      // 如果样式值包含百分比，则转换为像素值
       if (styL.includes('%')) {
-        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
-        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
+        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, '')
+        styL = +styL.replace(/\px/g, '');
+        styT = +styT.replace(/\px/g, '');
       }
 
       document.onmousemove = function(e) {
-        // 通过事件委托，计算移动的距离
-        let left = e.clientX - disX
-        let top = e.clientY - disY
+        // 计算移动的距离
+        let left = e.clientX - disX;
+        let top = e.clientY - disY;
+        console.log(left, top)
 
-        // 边界处理
-        // if (-(left) > minDragDomLeft) {
-        //   left = -minDragDomLeft
-        // } else if (left > maxDragDomLeft) {
-        //   left = maxDragDomLeft
-        // }
+        // 获取屏幕宽高
+        const screenWidth = document.body.clientWidth;
+        const screenHeight = document.body.clientHeight;
 
-        // if (-(top) > minDragDomTop) {
-        //   top = -minDragDomTop
-        // } else if (top > maxDragDomTop) {
-        //   top = maxDragDomTop
-        // }
+        // 获取对话框宽高
+        const dialogWidth = dragDom.offsetWidth;
+        const dialogHeight = dragDom.offsetHeight;
 
-        // 移动当前元素
-        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
+        // 边界限制逻辑
+        left = Math.max(0, Math.min(left + styL, screenWidth - dialogWidth));
+        top = Math.max(0, Math.min(top + styT, screenHeight - dialogHeight));
 
-        // emit onDrag event
-        vnode.child.$emit('dragDialog')
-      }
+        // 更新对话框位置
+        dragDom.style.left = `${left}px`;
+        dragDom.style.top = `${top}px`;
+        console.log(left, top)
 
-      document.onmouseup = function(e) {
-        document.onmousemove = null
-        document.onmouseup = null
-      }
-    }
+        // 触发拖拽事件
+        vnode.child.$emit('dragDialog');
+      };
+
+      document.onmouseup = function() {
+        // 清除事件监听
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    };
   }
-}
+};