meixioacomponent 0.2.27 → 0.2.30

package/lib/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meixioacomponent",
-  "version": "0.2.27",
+  "version": "0.2.30",
   "private": false,
   "author": "YuRi",
   "main": "lib/meixioacomponent.umd.min.js",

package/packages/components/base/baseDialog/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dialog-wrap" v-if="isShow">
     <el-dialog
-      :top="top"
+      :top="`0px`"
       ref="dialog"
       :modal="modal"
       :width="width"
@@ -14,15 +14,27 @@
       :visible.sync="centerDialogVisible"
       :modal-append-to-body="appendToBody"
     >
-      <div class="dialog-title-wrap" slot="title">
+      <div class="dialog-title-wrap" slot="title" ref="dialogTitleWrap">
         <span>{{ title }}</span>
-        <base-icon
-          :size="`d`"
-          :color="`d`"
-          :event="true"
-          :name="`meixicomponenticon-close`"
-          @iconClick="iconClick"
-        ></base-icon>
+        <div class="title-handle-wrap">
+          <base-icon
+            :size="`d`"
+            :color="`d`"
+            v-if="onDrag"
+            :event="true"
+            ref="dragIcon"
+            :iconClass="`element`"
+            :name="`el-icon-rank`"
+          ></base-icon>
+
+          <base-icon
+            :size="`d`"
+            :color="`d`"
+            :event="true"
+            :name="`meixicomponenticon-close`"
+            @iconClick="iconClick"
+          ></base-icon>
+        </div>
       </div>
       <div class="dialog-content-wrap" :style="dialogContentStyle">
         <slot name="dialog-content"></slot>
@@ -34,16 +46,30 @@
 </template>
 
 <script>
+import UseDrag from "../../../config/use/useDrag";
 export default {
   name: "baseDialog",
   data() {
     return {
       isShow: true,
+      useDrag: null,
       centerDialogVisible: false,
     };
   },
 
+  mounted() {
+    this.$nextTick(() => {
+      if (this.$props.onDrag) {
+        this.$refs.dragIcon.$el.addEventListener("mousedown", this.startDrag);
+      }
+    });
+  },
   props: {
+    // 是否开启拖拽
+    onDrag: {
+      type: Boolean,
+      default: true,
+    },
     //   标题栏文字
     title: {
       type: String,
@@ -55,7 +81,10 @@ export default {
     },
     // 距离上部的距离
     top: {
-      type: String,
+      type: Number,
+      default: () => {
+        return document.documentElement.clientHeight * 0.15;
+      },
     },
     //  是否开启遮罩层
     modal: {
@@ -91,19 +120,44 @@ export default {
     },
   },
   methods: {
+    init() {
+      let target = this.$refs.dialog.$el.childNodes[0];
+      let left =
+        (document.documentElement.clientWidth - target.clientWidth) / 2;
+      target.style.cssText += `top:${parseInt(this.$props.top)}px;left:${left}px;margin:0px !important`;
+    },
+    startDrag(e) {
+      if (!this.useDrag) {
+        let target = this.$refs.dialog.$el.children[0];
+        this.useDrag = new UseDrag({
+          target: target,
+          handle: target.childNodes[0],
+          onDragEnd: () => {},
+        });
+        this.$nextTick(() => {
+          this.useDrag.startDrag(e);
+        });
+      } else {
+        this.useDrag.startDrag(e);
+      }
+    },
+
     showDialog(cb) {
-      //console.log(this.$refs.dialog);
-      this.centerDialogVisible = true;
-      //console.log(this.$refs.dialog);
       if (cb) {
-        cb();
+        cb(this.startShow);
+      } else {
+        this.startShow();
       }
     },
+    startShow() {
+      this.centerDialogVisible = true;
+      this.$nextTick(() => {
+        this.init();
+      });
+    },
     closeDialog() {
       if (this.$props.isDestroy) {
         this.isShow = false;
-        //console.log(this.isShow);
-        // this.$destroy();
         this.$nextTick(() => {
           this.$destroy();
         });
@@ -140,7 +194,12 @@ export default {
   span {
     color: var(--font-color-d);
     font-size: var(--font-size-xl);
-    font-weight: var(--font-weight-g);
+    font-weight: var(--font-weight-kg);
+  }
+  .title-handle-wrap {
+    width: auto;
+    height: auto;
+    display: flex;
   }
 }
 </style>

package/packages/components/base/baseDialogTable/dialogTable.vue

@@ -1,8 +1,10 @@
 <template>
   <base-dialog
+    :top="top"
     :title="title"
     ref="dialog"
     :width="`1000px`"
+    :onDrag="onDrag"
     :isDestroy="isDestroy"
     :contentHeight="contentHeight"
     @hook:destroyed="dialogDestroy"
@@ -81,6 +83,17 @@ export default {
   beforeDestroy() {},
 
   props: {
+    // 是否开启拖拽
+    onDrag: {
+      type: Boolean,
+      default: true,
+    },
+    top: {
+      type: Number,
+      default: () => {
+        return document.documentElement.clientHeight * 0.15;
+      },
+    },
     contentHeight: {
       type: String,
       default: "50vh",

package/packages/components/base/baseDrawer/index.vue

@@ -1,8 +1,8 @@
 <template>
   <el-drawer
     ref="drawer"
-    :size="size"
     :modal="modal"
+    :size="drawerSize"
     :withHeader="false"
     :visible.sync="open"
     :direction="direction"
@@ -14,13 +14,18 @@
   >
     <!-- 插槽插入你需要渲染的内容 -->
     <div class="drawer-content-wrap">
-      <el-button
-        type="primary"
-        @click="hiddenDrawer"
-        icon="el-icon-close"
-        :style="closeButtonStyle"
-        class="drawer-close-button"
-      ></el-button>
+      <div class="drawer-handle-wrap" :style="handleStyle" v-if="handleShow">
+        <div class="drawer-handle-content">
+          <el-button
+            type="primary"
+            @click="hiddenDrawer"
+            icon="el-icon-close"
+            class="drawer-close-button"
+          ></el-button>
+          <div class="drawer-handle-resize" ref="handleResize"></div>
+        </div>
+      </div>
+
       <div class="drawer-content-title" v-if="header">
         <span>{{ title }}</span>
         <base-icon
@@ -39,15 +44,26 @@
 </template>
 
 <script>
+import UseResize from "../../../config/use/UseResize";
 export default {
   name: "baseDrawer",
   data() {
     return {
       open: false,
-      closeButtonStyle: null,
+      useResize: null,
+      drawerSize: null,
     };
   },
+  created() {
+    this.drawerSize = this.$props.size;
+  },
+
+  mounted() {},
   props: {
+    resize: {
+      type: Boolean,
+      default: true,
+    },
     //   大小
     size: {
       type: Number,
@@ -103,19 +119,24 @@ export default {
     iconClick() {
       this.hiddenDrawer();
     },
-    showDrawer(cb) {
+    openDrawer(cb) {
       if (this.isExis()) {
-        this.open = true;
         if (cb) {
-          this.$nextTick(() => {
-            cb();
-          });
+          cb(this.startDrawer);
+        } else {
+          this.startDrawer();
         }
       }
+    },
+
+    startDrawer() {
+      this.open = true;
       this.$nextTick(() => {
         this.setDrawerStyle();
+        console.log(this.$refs.drawer);
       });
     },
+
     hiddenDrawer() {
       if (this.isExis()) {
         this.$refs.drawer.closeDrawer();
@@ -124,34 +145,46 @@ export default {
 
     setDrawerStyle() {
       let el = this.$refs.drawer.$el;
-      if (typeof this.$props.size == "number") {
+      if (typeof this.drawerSize == "number") {
         let direction = this.$props.direction;
         if (direction == "rtl") {
           el.style.left = "auto";
         } else if (direction == "ltr") {
           el.style.right = "auto";
         }
-        el.style.width = `${this.$props.size}px`;
+        el.style.width = `${this.drawerSize}px`;
         el.style.boxShadow = `0 2px 12px 0 rgb(0 0 0 / 10%)`;
-        this.setButtonStyle();
+      }
+      if (this.$props.resize) {
+        this.$refs.handleResize.addEventListener("mousedown", this.mousedown);
       }
     },
 
-    setButtonStyle() {
-      let direction = this.$props.direction;
-
-      if (direction == "rtl") {
-        this.closeButtonStyle = {
-          left: `calc(100% - 43px - ${this.$props.size}px)`,
-        };
-      } else if (direction == "ltr") {
-        this.closeButtonStyle = {
-          left: `calc(${this.$props.size}px)`,
-        };
+    mousedown(e) {
+      if (this.useResize) {
+        this.useResize.startResize(e);
+      } else {
+        this.useResize = new UseResize({
+          type: "width",
+          value: this.drawerSize,
+          moveing: this.moveing,
+          resizeEnd: () => {},
+        });
+        this.useResize.startResize(e);
       }
     },
+    moveing(e) {
+      let ref = this.$refs.drawer;
+      this.drawerSize = e;
+      ref.$el.style.cssText += `width:${e}px`;
+    },
   },
   computed: {
+    handleShow() {
+      let direction = this.$props.direction;
+      return direction == "rtl" || direction == "ltr";
+    },
+
     contentStyle() {
       if (this.$props.header) {
         return { height: `calc(100% - 56px)` };
@@ -159,6 +192,20 @@ export default {
         return { height: `calc(100% - var(--margin-4))` };
       }
     },
+    handleStyle() {
+      let direction = this.$props.direction;
+      if (direction == "rtl") {
+        return {
+          width: "44px",
+          left: `calc(100% - 44px - ${this.drawerSize}px)`,
+        };
+      } else if (direction == "ltr") {
+        return {
+          width: "44px",
+          left: `calc(${this.drawerSize}px)`,
+        };
+      }
+    },
   },
 };
 </script>
@@ -190,12 +237,40 @@ export default {
     margin-top: var(--margin-4);
   }
 }
-.drawer-close-button {
-  top: 100px;
-  width: 40px;
-  display: flex;
-  flex-flow: row;
+
+.drawer-handle-wrap {
+  top: 0px;
+  height: 100%;
   position: fixed;
+  background: transparent;
   justify-content: center;
+  .drawer-handle-content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .drawer-close-button {
+      right: 0px;
+      top: 100px;
+      width: 40px;
+      height: 40px;
+      display: flex;
+      flex-flow: row;
+      position: absolute;
+      justify-content: center;
+    }
+    .drawer-handle-resize {
+      top: 0px;
+      right: 0px;
+      width: 4px;
+      z-index: 2;
+      height: 100%;
+      position: absolute;
+      background: transparent;
+      &:hover {
+        cursor: ew-resize;
+        background: var(--color-primary);
+      }
+    }
+  }
 }
 </style>

package/packages/components/base/baseIcon/index.vue

@@ -131,6 +131,9 @@ export default {
     font-size: var(--icon-default);
   }
 }
+.base-icon-wrap + .base-icon-wrap {
+  margin-left: var(--margin-4);
+}
 .event {
   cursor: pointer;
   transition: all 0.3s var(--ease-out);
@@ -148,10 +151,7 @@ export default {
 .disable {
   cursor: not-allowed;
   i {
-    color: var(--color-gray-d) !important;
+    color: var(--text-disabled) !important;
   }
 }
-.plain + .plain {
-  margin-left: var(--margin-4);
-}
 </style>

package/packages/components/base/basePlainTable/basePlainTable.vue

@@ -70,7 +70,7 @@ export default {
     tableId: {
       type: String,
     },
-    heigth: {
+    height: {
       default: "auto",
     },
   },

package/packages/components/base/basePopoverButton/index.vue

@@ -1,5 +1,6 @@
 <template>
   <el-popover
+    ref="popover"
     v-model="module"
     :trigger="trigger"
     @show="popoverShow"
@@ -12,6 +13,7 @@
       </div>
     </template>
     <el-button
+      v-if="!template"
       slot="reference"
       :size="buttonSize"
       :disabled="disabled"
@@ -31,6 +33,9 @@
       ></base-icon>
       <span class="inner-span" v-if="buttonText"> {{ buttonText }}</span>
     </el-button>
+    <template slot="reference" v-else>
+      <slot name="popoverReference"></slot>
+    </template>
   </el-popover>
 </template>
 
@@ -84,6 +89,11 @@ export default {
       type: String,
       default: "meixi",
     },
+
+    template: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     module: {
@@ -103,7 +113,7 @@ export default {
       this.$emit("poporverHide");
     },
     iconClick() {
-      this.module = true;
+      this.module = !this.module;
     },
   },
 };

package/packages/components/index.js

@@ -41,6 +41,7 @@ import DynamicMountClass from "./dynamicmount/DynamicMount";
 import SelectStore from "../config/selectStore/SelectStore";
 //
 import useImg from "../config/use/UseImg";
+import UseDrag from "../config/use/useDrag";
 import useFixedHeader from "../config/use/useFixedHeader";
 
 const meixicomponents = [
@@ -134,6 +135,7 @@ export default {
   Theme,
   SelectStore,
   useImg,
+  UseDrag,
   useFixedHeader,
   DynamicMountClass,
 };

package/packages/components/proForm/dialogForm/baseDialogForm.vue

@@ -1,8 +1,10 @@
 <template>
   <base-dialog
-    :title="title"
+    :top="top"
     ref="dialog"
-    :width="`1000px`"
+    :title="title"
+    :width="width"
+    :onDrag="onDrag"
     :isDestroy="true"
     :contentHeight="`50vh`"
   >
@@ -48,10 +50,24 @@ import baseButtonHandleVue from "../../base/baseButtonHandle/baseButtonHandle.vu
 export default {
   name: "baseDialogForm",
   data() {
-    return {
-    };
+    return {};
   },
   props: {
+    top: {
+      type: Number,
+      default: () => {
+        return document.documentElement.clientHeight * 0.15;
+      },
+    },
+    // 是否开启拖拽
+    onDrag: {
+      type: Boolean,
+      default: true,
+    },
+    width: {
+      type: [String, Number],
+      default: `1000px`,
+    },
     // 弹窗的标题
     title: {
       type: String,
@@ -131,9 +147,7 @@ export default {
       return validateResult;
     },
   },
-  watch: {
-  
-  },
+  watch: {},
 };
 </script>