meixioacomponent 0.2.27 → 0.2.30

package/packages/components/style/variables.less

@@ -2,10 +2,6 @@
   //
   --hover-gray: var(--color-gray-m);
   --hover-primary: var(--color-active-primary);
-  // 图标颜色
-  --icon-color-d: var(--font-color-m);
-  --icon-color-m: var(--font-color-s);
-  --icon-color-s: var(--font-color-ds);
   // 阴影
   --shadow: 0px 2px 4px #0000001f, 0 0 6px #0000001f;
   --shadow-2: 0px 1px 1px rgba(9, 30, 66, 0.25),
@@ -58,6 +54,11 @@
   // 字体颜色
   --text-white: white;
   --text-black: #333;
+  --text-disabled: #a5adba;
+  // 图标颜色
+  --icon-color-d: var(--font-color-m);
+  --icon-color-m: var(--font-color-s);
+  --icon-color-s: var(--font-color-ds);
   // 选择类的背景色
   //警告色
   --color-warn: #ff991f;
@@ -69,7 +70,7 @@
   --color-info: var(--color-gray-d);
   //滚动条样式
   // hover 主题色颜色
-  --hover-light-primary: #deebff;
+  --hover-light-primary: #e6eefa;
   // 选中色
   --color-selected: #213f72;
   --scrollbar-color: #4b4b4be6;

package/packages/config/use/UseResize.js

@@ -0,0 +1,48 @@
+class UseResize {
+  constructor(parmas) {
+    // type 为 width/height
+    this.type = parmas.type;
+    // 目标需要改变的值
+    this.value = parmas.value;
+    // 移动的时候的事件
+    this.moveing = parmas.moveing;
+    // 结束事件
+    this.resizeEnd = parmas.resizeEnd;
+    this.x = null;
+    this.sub = null;
+  }
+
+  setListen() {
+    document.onmousemove = this.onResizeing;
+    document.onmouseup = this.onResizeEnd;
+  }
+  removeListen() {
+    document.onmousemove = null;
+    document.onmouseup = null;
+  }
+
+  startResize(e) {
+    this.setListen();
+    if (this.type == "width") {
+      this.x = e.clientX;
+    }
+  }
+
+  onResizeing = (e) => {
+    let type = this.type;
+    if (type == "width") {
+      const stw = this.x - e.clientX;
+      this.sub = this.value + stw;
+      this.moveing(this.sub);
+    }
+  };
+  onResizeEnd = (e) => {
+    this.removeListen();
+    this.value = this.sub;
+    if (this.resizeEnd) {
+      this.resizeEnd();
+    }
+  };
+}
+
+export default UseResize;

package/packages/config/use/useDrag.js

@@ -0,0 +1,84 @@
+class UseDrag {
+  constructor(params) {
+    this.target = params.target;
+    this.handle = params.handle;
+    this.onDragEnd = params.onDragEnd;
+    this.x = null;
+    this.y = null;
+    this.minLeft = null;
+    this.minTop = null;
+    this.maxLeft = null;
+    this.maxTop = null;
+    this.styL = null;
+    this.styT = null;
+    this.setLimit();
+  }
+  setLimit() {
+    let target = this.target;
+    const screenWidth = document.body.clientWidth; // body当前宽度
+    const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取)
+    const targetWidth = target.clientWidth; // 对话框宽度
+    const targetheight = target.clientHeight; // 对话框高度
+    this.maxLeft = screenWidth - targetWidth;
+    this.maxTop = screenHeight - targetheight;
+  }
+
+  removeListen() {
+    document.onmousemove = null;
+    document.onmouseup = null;
+  }
+
+  startDrag(e) {
+    this.x = e.clientX;
+    this.y = e.clientY;
+    this.styL = this.getStyle(this.target, "left");
+    this.styT = this.getStyle(this.target, "top");
+
+    if (this.styL.includes("%")) {
+      this.styL =
+        +document.body.clientWidth * (+this.styL.replace(/\%/g, "") / 100);
+      this.styT =
+        +document.body.clientHeight * (+this.styT.replace(/\%/g, "") / 100);
+    } else {
+      this.styL = +this.styL.replace(/\px/g, "");
+      this.styT = +this.styT.replace(/\px/g, "");
+    }
+
+    document.onmousemove = this.mousemove;
+    document.onmouseup = this.dragEnd;
+  }
+  getStyle(dom, attr) {
+    if (window.document.currentStyle) {
+      return dom.currentStyle[attr];
+    } else {
+      return getComputedStyle(dom, false)[attr];
+    }
+  }
+  mousemove = (e) => {
+    let left = this.styL - (this.x - e.clientX);
+    let top = this.styT - (this.y - e.clientY);
+
+    if (left <= 0) {
+      left = 0;
+    } else if (left > this.maxLeft) {
+      left = this.maxLeft;
+    }
+
+    if (top <= 0) {
+      top = 0;
+    } else if (top > this.maxTop) {
+      top = this.maxTop;
+    }
+
+    this.target.style.cssText += `;left:${left}px;top:${top}px;`;
+  };
+
+  dragEnd = () => {
+    this.removeListen();
+    if (this.onDragEnd) {
+      this.onDragEnd();
+    }
+  };
+}
+
+export default UseDrag;

package/packages/utils/utils.js

@@ -1,4 +1,3 @@
-
 import dayjs from "dayjs";
 
 export const formatDate = (dateObj, fmt = "YYYY-MM-DD hh:mm:ss") => {
@@ -184,4 +183,15 @@ export const jugeFileTypeKey = (suffix) => {
   return key;
 };
 
-
+export const vhToNumber = (type, value) => {
+  if (type == "height") {
+    let heightValue = window.innerHeight;
+    console.log(heightValue);
+    return heightValue * (value / 100);
+  } else if (type == "width") {
+    let widthValue = window.innerWidth;
+    return widthValue * (value / 100);
+  } else {
+    return value;
+  }
+};