gyyg-components 0.3.10 → 0.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gyyg-components",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "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,14 +18,23 @@
       @close="closeMethod"
       :destroy-on-close="destroyOnClose"
       :modal='modal'
-      :style="'height:' + height"
+      ref="dialog"
     >
-      <div slot="title" style="font-size: 16px; color: #303133;">
-        <el-icon :class="titleIcon" style="color: #1890ff; font-size: 18px;margin-right: 5px;"></el-icon>
+      <div
+        slot="title"
+        style="font-size: 16px; color: #303133;"
+      >
+        <el-icon
+          :class="titleIcon"
+          style="color: #1890ff; font-size: 18px;margin-right: 5px;"
+        ></el-icon>
         <span>{{ title }}</span>
       </div>
       <slot name="body" />
-      <div v-if="footer" slot="footer">
+      <div
+        v-if="footer"
+        slot="footer"
+      >
         <slot name="footer" />
       </div>
     </el-dialog>
@@ -78,7 +87,7 @@ export default {
       type: Boolean
     },
     //是否需要遮罩层
-    modal:{
+    modal: {
       default: true,
       type: Boolean
     },
@@ -107,16 +116,24 @@ export default {
   },
   computed: {
     customClass() {
-      let className = this.dialogClass;
+      let className = this.height !== 'auto' ? 'haveHeight-dialog' : this.dialogClass;
       return className;
     },
   },
+
   created() {
     this.type === "fullscreen" && (this.fullscreen = true);
   },
   methods: {
     open() {
       this.visible = true;
+      console.log(this.height)
+      if(this.height !== 'auto' && this.height) {
+        this.$nextTick(() => {
+          this.$refs.dialog.$el.firstElementChild.style.height = this.height;
+        });
+      }
+      
     },
     close() {
       this.visible = false;
@@ -135,18 +152,21 @@ export default {
 .base-dialog {
   text-align: left;
 }
+
 /deep/.el-dialog__wrapper {
   overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: auto 0;
+
   .el-dialog {
     display: flex;
     flex-direction: column;
     border-radius: 8px;
     margin: 0;
     margin-top: 0 !important;
+
     .el-dialog__header {
       text-align: left;
       background-color: #efefef;
@@ -201,6 +221,7 @@ export default {
     }
 
     .custom-table {
+
       // 取消表格下边线
       tbody tr:last-child td {
         border-bottom: none !important;
@@ -220,6 +241,7 @@ export default {
     .el-dialog__body {
       padding: 10px;
     }
+
     .el-dialog__footer {
       padding: 10px;
       border: none;
@@ -229,12 +251,14 @@ export default {
     }
   }
 }
+
+.shan-maintenance-dialog {
+  /deep/ .el-dialog {
+    height: 90%;
+  }
+}
+
 /deep/ .el-dialog {
   height: 100%;
 }
-.shan-maintenance-dialog {
-    /deep/ .el-dialog {
-        height: 90%;
-    }
-}
 </style>

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

@@ -1,64 +1,68 @@
 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;
 
-      // 获取到的值带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`;
+        // 触发拖拽事件
+        vnode.child.$emit('dragDialog');
+      };
 
-      document.onmouseup = function(e) {
-        document.onmousemove = null
-        document.onmouseup = null
-      }
-    }
+      document.onmouseup = function() {
+        // 清除事件监听
+        document.onmousemove = null;
+        document.onmouseup = null;
+      };
+    };
   }
-}
+};

package/src/directive/hasPermi.js

@@ -19,9 +19,7 @@
             console.log(el.parentNode);
             el.parentNode && el.parentNode.removeChild(el)
         }
-    } else {
-        throw new Error(`请设置操作权限标签值`)
-    }
+    } 
     }
   })