cnhis-design-vue 2.1.56 → 2.1.57

package/packages/verification-code/SlideVerify.vue

@@ -1,306 +1,306 @@
-<template>
-  <div class="slide">
-    <div v-if="title" class="verify-title">
-      <span>{{ title }}</span>
-      <div class="right-icon" @click="cancelVerify">
-        <a-icon type="close" />
-      </div>
-    </div>
-    <div class="verify-div">
-      <div class="verify-container">
-        <div class="slide-verify">
-          <div class="bg-wrap">
-            <img class="bg-img" :src="resource.resourceImg" alt="" :style="resourceStyle" />
-          </div>
-          <a-icon type="redo" class="slide-verify-refresh-icon" @click="refresh" />
-          <img
-            ref="block"
-            class="slide-verify-block"
-            :src="resource.puzzleImg"
-            draggable="false"
-            @mousedown="sliderDown"
-            :style="puzzleStyle"
-          />
-          <div
-            class="slide-verify-slider"
-            :class="{
-              'container-active': containerActive,
-              'container-success': containerSuccess,
-              'container-fail': containerFail
-            }"
-            :style="{ width: resourceStyle.width }"
-          >
-            <div class="slide-verify-slider-mask" :style="{ width: sliderMaskWidth }">
-              <!-- slider -->
-              <div
-                @mousedown="sliderDown"
-                class="slide-verify-slider-mask-item"
-                :style="{ left: sliderLeft }"
-              >
-                <a-icon
-                  class="slide-verify-slider-mask-item-icon"
-                  :type="containerSuccess ? 'check' : containerFail ? 'close' : 'arrow-right'"
-                />
-              </div>
-            </div>
-            <span class="slide-verify-slider-text">{{ sliderText }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { Icon } from "ant-design-vue";
-
-const _uzzleWidth = 40;
-const _puzzleHeight = 40;
-const _puzzleYAxis = 0;
-const _resourceWidth = 420;
-const _resourceHeight = 300;
-import create from '@/core/create';
-export default create({
-  name: "slide-verify",
-  props: {
-    title: {
-      type: String,
-      default: "请完成安全验证"
-    },
-    resource: {
-      type: Object,
-      required: true
-    }
-  },
-  components: {
-    [Icon.name]: Icon
-  },
-  computed: {},
-  watch: {},
-  data() {
-    return {
-      resourceStyle: {},
-      puzzleStyle: {},
-      containerActive: false, // container active class
-      containerSuccess: false, // container success class
-      containerFail: false, // container fail class
-      sliderText: "向右拖动滑块填充拼图",
-      sliderMaskWidth: 0,
-      sliderLeft: 0,
-      isMouseDown: false,
-      originX: undefined,
-      originY: undefined,
-      block: null
-    };
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.init();
-    });
-  },
-  methods: {
-    init() {
-      this.block = this.$refs.block;
-      const {
-        resourceWidth,
-        resourceHeight,
-        puzzleWidth,
-        puzzleHeight,
-        puzzleYAxis
-      } = this.resource;
-      this.resourceStyle = {
-        width: resourceWidth ? `${resourceWidth}px` : `${_resourceWidth}px`,
-        height: resourceHeight ? `${resourceHeight}px` : `${_resourceHeight}px`
-      };
-      this.puzzleStyle = {
-        width: puzzleWidth ? `${puzzleWidth}px` : `${_uzzleWidth}px`,
-        height: puzzleHeight ? `${puzzleHeight}px` : `${_puzzleHeight}px`,
-        top: puzzleYAxis ? `${puzzleYAxis}px` : `${_puzzleYAxis}px`
-      };
-      document.addEventListener("mousemove", this.mousemoveEvent);
-      document.addEventListener("mouseup", this.mouseupEvent);
-    },
-    mousemoveEvent(e) {
-      if (!this.isMouseDown) return false;
-      const moveX = e.clientX - this.originX;
-      const puzzleWidth = this.resource.puzzleWidth || _uzzleWidth;
-      const resourceWidth = this.resource.resourceWidth || _resourceWidth;
-      if (moveX < 0 || moveX + 38 >= resourceWidth) return false;
-      this.sliderLeft = moveX + "px";
-      let blockLeft = ((resourceWidth - puzzleWidth) / (resourceWidth - 38)) * moveX;
-
-      this.block.style.left = blockLeft + "px";
-      this.containerActive = true; // add active
-      this.sliderMaskWidth = moveX + "px";
-    },
-    mouseupEvent(e) {
-      if (!this.isMouseDown) return false;
-      this.isMouseDown = false;
-      if (e.clientX === this.originX) return false;
-      const left = parseInt(this.block.style.left);
-      this.$emit("curLeft", { left });
-    },
-    sliderDown(event) {
-      this.originX = event.clientX;
-      this.originY = event.clientY;
-      this.isMouseDown = true;
-    },
-    cancelVerify() {
-      this.$emit("cancelVerify");
-    },
-    refresh() {
-      this.$emit("refresh");
-      this.reset();
-    },
-    reset() {
-      this.containerActive = false;
-      this.containerSuccess = false;
-      this.containerFail = false;
-      this.sliderLeft = 0;
-      this.block && (this.block.style.left = 0);
-      this.sliderMaskWidth = 0;
-    }
-  },
-  beforeDestroy() {
-    document.removeEventListener("mousemove", this.mousemoveEvent);
-    document.removeEventListener("mouseup", this.mouseupEvent);
-  }
-});
-</script>
-
-<style lang="less" scoped>
-.slide {
-  width: fit-content;
-  margin: auto;
-}
-.verify-title {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  height: 52px;
-  padding: 10px 20px;
-  color: #828894;
-  font-size: 16px;
-  text-align: left;
-  border-bottom: 1px solid #ccc;
-  span {
-    color: #212121;
-  }
-  .right-icon {
-    cursor: pointer;
-  }
-}
-.verify-div {
-  padding: 0 20px 20px 20px;
-}
-.verify-container {
-  display: inline-block;
-  padding: 16px;
-  margin: 20px auto;
-  border: 1px solid #e7ecf1;
-  box-shadow: 0 0 10px #dadada;
-}
-.slide-verify {
-  display: inline-block;
-  position: relative;
-  .slide-verify-refresh-icon {
-    position: absolute;
-    right: 4px;
-    top: 4px;
-    font-size: 20px;
-    color: #ccc;
-    cursor: pointer;
-    &:hover {
-      transform: scale(1.05);
-      color: #fff;
-    }
-  }
-  .slide-verify-block {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 40px;
-    height: 40px;
-    cursor: pointer;
-  }
-  .slide-verify-slider {
-    position: relative;
-    text-align: center;
-    width: 420px;
-    height: 40px;
-    line-height: 40px;
-    margin-top: 15px;
-    background: #f7f9fa;
-    color: #45494c;
-    border: 1px solid #e4e7eb;
-  }
-  .slide-verify-slider-mask {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 40px;
-    border: 0px solid #1991fa;
-    background: #d1e9fe;
-    .slide-verify-slider-mask-item {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 38px;
-      height: 38px;
-      background: #fff;
-      box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
-      cursor: pointer;
-      transition: background 0.2s linear;
-    }
-    .slide-verify-slider-mask-item:hover {
-      background: #1991fa;
-      .slide-verify-slider-mask-item-icon {
-        color: #fff;
-      }
-    }
-  }
-}
-.container-active {
-  .slide-verify-slider-mask {
-    height: 38px;
-    border-width: 1px;
-    .slide-verify-slider-mask-item {
-      height: 38px;
-      top: -1px;
-      border: 1px solid #1991fa;
-    }
-  }
-}
-.container-success {
-  .slide-verify-slider-mask {
-    height: 38px;
-    border: 1px solid #52ccba;
-    background-color: #d2f4ef;
-    .slide-verify-slider-mask-item {
-      height: 38px;
-      top: -1px;
-      border: 1px solid #52ccba;
-      background-color: #52ccba !important;
-    }
-  }
-}
-.container-fail {
-  .slide-verify-slider-mask {
-    height: 38px;
-    border: 1px solid #f57a7a;
-    background-color: #fce1e1;
-    .slide-verify-slider-mask-item {
-      height: 38px;
-      top: -1px;
-      border: 1px solid #f57a7a;
-      background-color: #f57a7a !important;
-    }
-  }
-}
-.container-active .slide-verify-slider-text,
-.container-success .slide-verify-slider-text,
-.container-fail .slide-verify-slider-text {
-  display: none;
-}
-</style>
+<template>
+  <div class="slide">
+    <div v-if="title" class="verify-title">
+      <span>{{ title }}</span>
+      <div class="right-icon" @click="cancelVerify">
+        <a-icon type="close" />
+      </div>
+    </div>
+    <div class="verify-div">
+      <div class="verify-container">
+        <div class="slide-verify">
+          <div class="bg-wrap">
+            <img class="bg-img" :src="resource.resourceImg" alt="" :style="resourceStyle" />
+          </div>
+          <a-icon type="redo" class="slide-verify-refresh-icon" @click="refresh" />
+          <img
+            ref="block"
+            class="slide-verify-block"
+            :src="resource.puzzleImg"
+            draggable="false"
+            @mousedown="sliderDown"
+            :style="puzzleStyle"
+          />
+          <div
+            class="slide-verify-slider"
+            :class="{
+              'container-active': containerActive,
+              'container-success': containerSuccess,
+              'container-fail': containerFail
+            }"
+            :style="{ width: resourceStyle.width }"
+          >
+            <div class="slide-verify-slider-mask" :style="{ width: sliderMaskWidth }">
+              <!-- slider -->
+              <div
+                @mousedown="sliderDown"
+                class="slide-verify-slider-mask-item"
+                :style="{ left: sliderLeft }"
+              >
+                <a-icon
+                  class="slide-verify-slider-mask-item-icon"
+                  :type="containerSuccess ? 'check' : containerFail ? 'close' : 'arrow-right'"
+                />
+              </div>
+            </div>
+            <span class="slide-verify-slider-text">{{ sliderText }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Icon } from "ant-design-vue";
+
+const _uzzleWidth = 40;
+const _puzzleHeight = 40;
+const _puzzleYAxis = 0;
+const _resourceWidth = 420;
+const _resourceHeight = 300;
+import create from '@/core/create';
+export default create({
+  name: "slide-verify",
+  props: {
+    title: {
+      type: String,
+      default: "请完成安全验证"
+    },
+    resource: {
+      type: Object,
+      required: true
+    }
+  },
+  components: {
+    [Icon.name]: Icon
+  },
+  computed: {},
+  watch: {},
+  data() {
+    return {
+      resourceStyle: {},
+      puzzleStyle: {},
+      containerActive: false, // container active class
+      containerSuccess: false, // container success class
+      containerFail: false, // container fail class
+      sliderText: "向右拖动滑块填充拼图",
+      sliderMaskWidth: 0,
+      sliderLeft: 0,
+      isMouseDown: false,
+      originX: undefined,
+      originY: undefined,
+      block: null
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.init();
+    });
+  },
+  methods: {
+    init() {
+      this.block = this.$refs.block;
+      const {
+        resourceWidth,
+        resourceHeight,
+        puzzleWidth,
+        puzzleHeight,
+        puzzleYAxis
+      } = this.resource;
+      this.resourceStyle = {
+        width: resourceWidth ? `${resourceWidth}px` : `${_resourceWidth}px`,
+        height: resourceHeight ? `${resourceHeight}px` : `${_resourceHeight}px`
+      };
+      this.puzzleStyle = {
+        width: puzzleWidth ? `${puzzleWidth}px` : `${_uzzleWidth}px`,
+        height: puzzleHeight ? `${puzzleHeight}px` : `${_puzzleHeight}px`,
+        top: puzzleYAxis ? `${puzzleYAxis}px` : `${_puzzleYAxis}px`
+      };
+      document.addEventListener("mousemove", this.mousemoveEvent);
+      document.addEventListener("mouseup", this.mouseupEvent);
+    },
+    mousemoveEvent(e) {
+      if (!this.isMouseDown) return false;
+      const moveX = e.clientX - this.originX;
+      const puzzleWidth = this.resource.puzzleWidth || _uzzleWidth;
+      const resourceWidth = this.resource.resourceWidth || _resourceWidth;
+      if (moveX < 0 || moveX + 38 >= resourceWidth) return false;
+      this.sliderLeft = moveX + "px";
+      let blockLeft = ((resourceWidth - puzzleWidth) / (resourceWidth - 38)) * moveX;
+
+      this.block.style.left = blockLeft + "px";
+      this.containerActive = true; // add active
+      this.sliderMaskWidth = moveX + "px";
+    },
+    mouseupEvent(e) {
+      if (!this.isMouseDown) return false;
+      this.isMouseDown = false;
+      if (e.clientX === this.originX) return false;
+      const left = parseInt(this.block.style.left);
+      this.$emit("curLeft", { left });
+    },
+    sliderDown(event) {
+      this.originX = event.clientX;
+      this.originY = event.clientY;
+      this.isMouseDown = true;
+    },
+    cancelVerify() {
+      this.$emit("cancelVerify");
+    },
+    refresh() {
+      this.$emit("refresh");
+      this.reset();
+    },
+    reset() {
+      this.containerActive = false;
+      this.containerSuccess = false;
+      this.containerFail = false;
+      this.sliderLeft = 0;
+      this.block && (this.block.style.left = 0);
+      this.sliderMaskWidth = 0;
+    }
+  },
+  beforeDestroy() {
+    document.removeEventListener("mousemove", this.mousemoveEvent);
+    document.removeEventListener("mouseup", this.mouseupEvent);
+  }
+});
+</script>
+
+<style lang="less" scoped>
+.slide {
+  width: fit-content;
+  margin: auto;
+}
+.verify-title {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 52px;
+  padding: 10px 20px;
+  color: #828894;
+  font-size: 16px;
+  text-align: left;
+  border-bottom: 1px solid #ccc;
+  span {
+    color: #212121;
+  }
+  .right-icon {
+    cursor: pointer;
+  }
+}
+.verify-div {
+  padding: 0 20px 20px 20px;
+}
+.verify-container {
+  display: inline-block;
+  padding: 16px;
+  margin: 20px auto;
+  border: 1px solid #e7ecf1;
+  box-shadow: 0 0 10px #dadada;
+}
+.slide-verify {
+  display: inline-block;
+  position: relative;
+  .slide-verify-refresh-icon {
+    position: absolute;
+    right: 4px;
+    top: 4px;
+    font-size: 20px;
+    color: #ccc;
+    cursor: pointer;
+    &:hover {
+      transform: scale(1.05);
+      color: #fff;
+    }
+  }
+  .slide-verify-block {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+  }
+  .slide-verify-slider {
+    position: relative;
+    text-align: center;
+    width: 420px;
+    height: 40px;
+    line-height: 40px;
+    margin-top: 15px;
+    background: #f7f9fa;
+    color: #45494c;
+    border: 1px solid #e4e7eb;
+  }
+  .slide-verify-slider-mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 40px;
+    border: 0px solid #1991fa;
+    background: #d1e9fe;
+    .slide-verify-slider-mask-item {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 38px;
+      height: 38px;
+      background: #fff;
+      box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+      cursor: pointer;
+      transition: background 0.2s linear;
+    }
+    .slide-verify-slider-mask-item:hover {
+      background: #1991fa;
+      .slide-verify-slider-mask-item-icon {
+        color: #fff;
+      }
+    }
+  }
+}
+.container-active {
+  .slide-verify-slider-mask {
+    height: 38px;
+    border-width: 1px;
+    .slide-verify-slider-mask-item {
+      height: 38px;
+      top: -1px;
+      border: 1px solid #1991fa;
+    }
+  }
+}
+.container-success {
+  .slide-verify-slider-mask {
+    height: 38px;
+    border: 1px solid #52ccba;
+    background-color: #d2f4ef;
+    .slide-verify-slider-mask-item {
+      height: 38px;
+      top: -1px;
+      border: 1px solid #52ccba;
+      background-color: #52ccba !important;
+    }
+  }
+}
+.container-fail {
+  .slide-verify-slider-mask {
+    height: 38px;
+    border: 1px solid #f57a7a;
+    background-color: #fce1e1;
+    .slide-verify-slider-mask-item {
+      height: 38px;
+      top: -1px;
+      border: 1px solid #f57a7a;
+      background-color: #f57a7a !important;
+    }
+  }
+}
+.container-active .slide-verify-slider-text,
+.container-success .slide-verify-slider-text,
+.container-fail .slide-verify-slider-text {
+  display: none;
+}
+</style>

package/packages/verification-code/index.js

@@ -1,17 +1,17 @@
-// 导入组件
-import Verification from './verification-code';
-
-import SlideVerify from './SlideVerify'
-
-// 为组件提供 install 安装方法，供按需引入
-Verification.install = function(Vue) {
-  Vue.component(Verification.name, Verification);
-  Vue.component(SlideVerify.name, SlideVerify);
-};
-
-Object.assign(Verification, {
-  SlideVerify
-});
-
-// 默认导出组件
-export default Verification;
+// 导入组件
+import Verification from './verification-code';
+
+import SlideVerify from './SlideVerify'
+
+// 为组件提供 install 安装方法，供按需引入
+Verification.install = function(Vue) {
+  Vue.component(Verification.name, Verification);
+  Vue.component(SlideVerify.name, SlideVerify);
+};
+
+Object.assign(Verification, {
+  SlideVerify
+});
+
+// 默认导出组件
+export default Verification;