meixioacomponent 0.1.81 → 0.1.82

package/package.json

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

package/packages/components/base/baseMoverVerifiBar/baseMoverVerifiBar.vue

@@ -0,0 +1,256 @@
+<template>
+  <div
+    class="base-mover-verifi-bar-wrap"
+    ref="baseMoveVerifiBarWrap"
+    @mousemove.stop="mousemove"
+    @mouseleave="mouseleave"
+    :class="{ complate: statusComplate, 'box-leave': !moveStatus }"
+  >
+    <div
+      ref="moverBox"
+      class="mover-box"
+      :style="moverBoxStyle"
+      @mouseup.stop="mouseup"
+      @mousedown.stop="mousedown"
+    >
+      <base-icon
+        :plain="false"
+        :name="iconClass"
+        class="right-icon"
+        :active="statusComplate"
+      ></base-icon>
+    </div>
+    <div class="base-notice-text" :class="{ 'box-moveing': moveStatus == 1 }">
+      <span>{{ statusComplate ? complateText : noticText }}</span>
+    </div>
+
+    <div class="progress-bar" :style="progressBarStyle"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "baseMoverVerifiBar",
+  data() {
+    return {
+      // 记录移动的距离
+      moveX: 0,
+      //   最大可滑动的距离
+      maxLeft: 0,
+      //   box与style关联的值
+      moveLeft: 0,
+      //   是否处于加载状态
+      loading: true,
+      // 0为移动 1代表开始移动 2代表完成
+      moveStatus: 0,
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  props: {
+    noticText: {
+      type: String,
+      default: "请按住滑块，滑动至最右边完成校验",
+    },
+
+    complateText: {
+      type: String,
+      default: "已完成校验",
+    },
+
+    value: {
+      type: Boolean,
+      require: true,
+    },
+  },
+  computed: {
+    module: {
+      set(val) {
+        this.$emit("input", val);
+      },
+      get() {
+        return this.$props.value;
+      },
+    },
+    moverBoxStyle() {
+      return {
+        left: `${this.moveLeft}px`,
+      };
+    },
+    progressBarStyle() {
+      return {
+        width: `${this.moveLeft}px`,
+      };
+    },
+    statusComplate() {
+      return this.moveStatus == 2;
+    },
+
+    iconClass() {
+      if (this.statusComplate) {
+        return "icon-zhengque";
+      } else {
+        return "icon-icon-arrow-right";
+      }
+    },
+  },
+  methods: {
+    init() {
+      this.$nextTick(() => {
+        this.maxLeft =
+          this.$refs.baseMoveVerifiBarWrap.clientWidth -
+          this.$refs.moverBox.clientWidth;
+        this.loading = false;
+        this.moveX = 0;
+        this.moveLeft = 0;
+      });
+    },
+
+    mousedown(e) {
+      if (this.moveStatus == 2) return;
+      this.moveStatus = 1;
+      this.moveX = e.pageX;
+    },
+    mousemove(e) {
+      if (!this.moveStatus) return;
+      if (this.moveLeft >= this.maxLeft) {
+        this.mouseleave();
+        return;
+      } else {
+        this.moveLeft += e.pageX - this.moveX;
+        this.moveX = e.pageX;
+      }
+    },
+    mouseleave() {
+      if (this.moveLeft < this.maxLeft) {
+        this.moveStatus = 0;
+        this.module = false;
+        this.init();
+      } else {
+        this.setComplate();
+      }
+    },
+
+    mouseup() {
+      this.mouseleave();
+    },
+
+    setComplate() {
+      this.moveStatus = 2;
+      this.module = true;
+      this.moveLeft = this.maxLeft;
+      this.$emit("verifiComplate");
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.base-mover-verifi-bar-wrap {
+  width: 100%;
+  height: 40px;
+  overflow: hidden;
+  user-select: none;
+  position: relative;
+  border-radius: var(--radius);
+  background: var(--color-gray-m);
+  border: 1px solid var(--color-gray-d);
+  .mover-box {
+    z-index: 3;
+    width: 40px;
+    height: 100%;
+    cursor: move;
+    display: flex;
+    position: absolute;
+    align-items: center;
+    flex-flow: row nowrap;
+    justify-content: center;
+    background: var(--bg-white);
+
+    box-shadow: var(--shadow-fixed);
+
+    .right-icon {
+      cursor: move;
+    }
+  }
+
+  .box-moveing {
+    -webkit-text-fill-color: var(--text-white) !important;
+    span {
+      color: var(--text-white) !important;
+    }
+  }
+
+  .base-notice-text {
+    top: 0px;
+    left: 0px;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    position: absolute;
+    align-items: center;
+    flex-flow: row nowrap;
+    justify-content: center;
+    background: -webkit-gradient(
+      linear,
+      left top,
+      right top,
+      color-stop(0, #4d4d4d),
+      color-stop(0.4, #4d4d4d),
+      color-stop(0.5, #fff),
+      color-stop(0.6, #4d4d4d),
+      color-stop(1, #4d4d4d)
+    );
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: slidetounlock 3s infinite;
+    text-size-adjust: none;
+    span {
+      color: var(--font-color-m);
+      font-size: var(--font-size-s);
+    }
+  }
+  .progress-bar {
+    top: 0px;
+    left: 0px;
+    z-index: 1;
+    height: 100%;
+    position: absolute;
+    background: var(--color-primary);
+  }
+}
+
+.complate {
+  .mover-box {
+    cursor: default;
+    .right-icon {
+      cursor: default;
+    }
+  }
+  .base-notice-text {
+    -webkit-text-fill-color: var(--text-white) !important;
+    span {
+      color: var(--text-white);
+    }
+  }
+}
+
+@keyframes slidetounlock {
+  0% {
+    background-position: -200px 0px;
+  }
+
+  100% {
+    background-position: 200px 0px;
+  }
+}
+
+.box-leave {
+  .progress-bar,
+  .mover-box {
+    transition: all 0.3s var(--ease-in);
+  }
+}
+</style>

package/packages/components/base/baseMoverVerifiBar/index.js

@@ -0,0 +1,6 @@
+import baseMoverVerifiBar from "./baseMoverVerifiBar.vue";
+
+baseMoverVerifiBar.install = function (Vue) {
+  Vue.component(baseMoverVerifiBar.name, baseMoverVerifiBar);
+};
+export default baseMoverVerifiBar;

package/packages/components/index.js

@@ -30,6 +30,7 @@ import baseDialogForm from "./proForm/dialogForm/dialogFormIndex";
 import baseForm from "./proForm/proForm/index";
 import baseFormWrap from "./proForm/proFormWrap/index";
 import baseProTable from "./proPageTable/index";
+import baseMoverVerifiBar from "./base/baseMoverVerifiBar";
 // js 文件相关
 import DynamicMount from "./dynamicmount/index.js";
 import componentConfig from "../config/componentConfig";
@@ -72,6 +73,7 @@ const meixicomponents = [
   baseForm,
   baseFormWrap,
   baseProTable,
+  baseMoverVerifiBar,
 ];
 
 const install = (Vue) => {
@@ -124,5 +126,5 @@ export default {
   SelectStore,
   useImg,
   useFixedHeader,
-  DynamicMountClass
+  DynamicMountClass,
 };

package/vue.config.js

@@ -7,4 +7,8 @@ module.exports = {
   css: {
     extract: false,
   },
+
+  productionSourceMap: false,
+
+  
 };