yc-ui2 0.1.0-beta6 → 0.1.0-beta8

package/dist/yc-ui2.umd.js

@@ -1853,7 +1853,7 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/YcSlideVerify/index.vue?vue&type=template&id=59bbdcfe&
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/YcSlideVerify/index.vue?vue&type=template&id=645ac48a&
 var render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -1882,404 +1882,48 @@ var staticRenderFns = [];
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
 var es_array_push = __webpack_require__(7658);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue?vue&type=template&id=b67196d8&scoped=true&
-var slide_verifyvue_type_template_id_b67196d8_scoped_true_render = function render() {
-  var _vm = this,
-    _c = _vm._self._c;
-  return _c('div', {
-    staticClass: "slide-verify",
-    style: {
-      width: _vm.w + 'px'
-    },
-    attrs: {
-      "id": "slideVerify",
-      "onselectstart": "return false;"
-    }
-  }, [_c('div', {
-    class: {
-      'slider-verify-loading': _vm.loadBlock
-    }
-  }), _c('canvas', {
-    ref: "canvas",
-    attrs: {
-      "width": _vm.w,
-      "height": _vm.h
-    }
-  }), _vm.show ? _c('div', {
-    staticClass: "slide-verify-refresh-icon",
-    on: {
-      "click": _vm.refresh
-    }
-  }) : _vm._e(), _c('canvas', {
-    ref: "block",
-    staticClass: "slide-verify-block",
-    attrs: {
-      "width": _vm.w,
-      "height": _vm.h
-    }
-  }), _c('div', {
-    staticClass: "slide-verify-slider",
-    class: {
-      'container-active': _vm.containerActive,
-      'container-success': _vm.containerSuccess,
-      'container-fail': _vm.containerFail
-    }
-  }, [_c('div', {
-    staticClass: "slide-verify-slider-mask",
-    style: {
-      width: _vm.sliderMaskWidth
-    }
-  }, [_c('div', {
-    staticClass: "slide-verify-slider-mask-item",
-    style: {
-      left: _vm.sliderLeft
-    },
-    on: {
-      "mousedown": _vm.sliderDown,
-      "touchstart": _vm.touchStartEvent,
-      "touchmove": function ($event) {
-        return _vm.handleMoveEvent($event, 'touch');
-      },
-      "touchend": function ($event) {
-        return _vm.handleMoveEndEvent($event, 'touch');
-      }
-    }
-  }, [_c('div', {
-    staticClass: "slide-verify-slider-mask-item-icon"
-  })])]), _c('span', {
-    staticClass: "slide-verify-slider-text"
-  }, [_vm._v(_vm._s(_vm.sliderText))])])]);
-};
-var slide_verifyvue_type_template_id_b67196d8_scoped_true_staticRenderFns = [];
-
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue?vue&type=script&lang=js&
-
-const PI = Math.PI;
-function sum(x, y) {
-  return x + y;
-}
-function square(x) {
-  return x * x;
-}
-/* harmony default export */ var slide_verifyvue_type_script_lang_js_ = ({
-  name: "SlideVerify",
-  props: {
-    // block length
-    l: {
-      type: Number,
-      default: 42
-    },
-    // block radius
-    r: {
-      type: Number,
-      default: 10
-    },
-    // canvas width
-    w: {
-      type: Number,
-      default: 310
-    },
-    // canvas height
-    h: {
-      type: Number,
-      default: 155
-    },
-    sliderText: {
-      type: String,
-      default: "Slide filled right"
-    },
-    accuracy: {
-      type: Number,
-      default: 5 // 若为 -1 则不进行机器判断
-    },
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/YcSlideVerify/index.vue?vue&type=script&lang=js&
 
-    show: {
-      type: Boolean,
-      default: true
-    },
-    imgs: {
-      type: Array,
-      default: () => []
-    }
+// import SlideVerify from "vue-monoplasty-slide-verify/src/lib/slide-verify.vue"
+/* harmony default export */ var YcSlideVerifyvue_type_script_lang_js_ = ({
+  name: "YcSlideVerify",
+  components: {
+    // SlideVerify,
   },
   data() {
     return {
-      containerActive: false,
-      // container active class
-      containerSuccess: false,
-      // container success class
-      containerFail: false,
-      // container fail class
-      canvasCtx: null,
-      blockCtx: null,
-      block: null,
-      block_x: undefined,
-      // container random position
-      block_y: undefined,
-      L: this.l + this.r * 2 + 3,
-      // block real length
-      img: undefined,
-      originX: undefined,
-      originY: undefined,
-      isMouseDown: false,
-      trail: [],
-      sliderLeft: 0,
-      // block right offset
-      sliderMaskWidth: 0,
-      // mask width,
-      success: false,
-      // Bug Fixes 修复了验证成功后还能滑动
-      loadBlock: true,
-      // Features 图片加载提示，防止图片没加载完就开始验证
-      timestamp: null
+      show: true,
+      isShow: false,
+      accuracy: 5,
+      sliderText: "拖动完成上方拼图",
+      countDownNum: 120
     };
   },
-  mounted() {
-    this.init();
+  computed: {
+    imgs() {
+      const list = [];
+      for (let i = 1; i < 9; i++) {
+        list.push(__webpack_require__(4359)(`./${i}.jpg`));
+      }
+      return list;
+    }
   },
   methods: {
-    init() {
-      this.initDom();
-      this.initImg();
-      this.bindEvents();
-    },
-    initDom() {
-      this.block = this.$refs.block;
-      this.canvasCtx = this.$refs.canvas.getContext("2d");
-      this.blockCtx = this.block.getContext("2d");
-    },
-    initImg() {
-      const img = this.createImg(() => {
-        // 图片加载完关闭遮蔽罩
-        this.loadBlock = false;
-        this.drawBlock();
-        this.canvasCtx.drawImage(img, 0, 0, this.w, this.h);
-        this.blockCtx.drawImage(img, 0, 0, this.w, this.h);
-        let {
-          block_x: x,
-          block_y: y,
-          r,
-          L
-        } = this;
-        let _y = y - r * 2 - 1;
-        let ImageData = this.blockCtx.getImageData(x, _y, L, L);
-        this.block.width = L;
-        this.blockCtx.putImageData(ImageData, 0, _y);
-      });
-      this.img = img;
-    },
-    drawBlock() {
-      this.block_x = this.getRandomNumberByRange(this.L + 10, this.w - (this.L + 10));
-      this.block_y = this.getRandomNumberByRange(10 + this.r * 2, this.h - (this.L + 10));
-      this.draw(this.canvasCtx, this.block_x, this.block_y, "fill");
-      this.draw(this.blockCtx, this.block_x, this.block_y, "clip");
-    },
-    draw(ctx, x, y, operation) {
-      let {
-        l,
-        r
-      } = this;
-      ctx.beginPath();
-      ctx.moveTo(x, y);
-      ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);
-      ctx.lineTo(x + l, y);
-      ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI);
-      ctx.lineTo(x + l, y + l);
-      ctx.lineTo(x, y + l);
-      ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true);
-      ctx.lineTo(x, y);
-      ctx.lineWidth = 2;
-      ctx.fillStyle = "rgba(255, 255, 255, 0.7)";
-      ctx.strokeStyle = "rgba(255, 255, 255, 0.7)";
-      ctx.stroke();
-      ctx[operation]();
-      // Bug Fixes 修复了火狐和ie显示问题
-      ctx.globalCompositeOperation = "destination-over";
-    },
-    createImg(onload) {
-      const img = document.createElement("img");
-      img.crossOrigin = "Anonymous";
-      img.onload = onload;
-      img.onerror = () => {
-        img.src = this.getRandomImg();
-      };
-      img.src = this.getRandomImg();
-      return img;
-    },
-    // 随机生成img src
-    getRandomImg() {
-      // return require('../assets/img.jpg')
-      const len = this.imgs.length;
-      return len > 0 ? this.imgs[this.getRandomNumberByRange(0, len - 1)] :
-      // "https://bing.ioliu.cn/v1/rand?w=300&h=150";
-      "https://source.unsplash.com/300x150/?book,library";
-      // "https://api.dujin.org/pic/fengjing";
-    },
-
-    getRandomNumberByRange(start, end) {
-      return Math.round(Math.random() * (end - start) + start);
-    },
-    refresh() {
-      this.reset();
-      this.$emit("refresh");
-    },
-    sliderDown(event) {
-      if (this.success) return;
-      this.originX = event.clientX;
-      this.originY = event.clientY;
-      this.isMouseDown = true;
-      this.timestamp = +new Date();
-    },
-    touchStartEvent(e) {
-      if (this.success) return;
-      this.originX = e.changedTouches[0].pageX;
-      this.originY = e.changedTouches[0].pageY;
-      this.isMouseDown = true;
-      this.timestamp = +new Date();
-    },
-    bindEvents() {
-      document.addEventListener("mousemove", this.handleMoveEvent);
-      document.addEventListener("mouseup", this.handleMoveEndEvent);
-    },
-    // 处理函数抽离
-    handleMoveEvent: throttle(function (e, type = "mouse") {
-      if (!this.isMouseDown) return false;
-      const moveX = type === "mouse" ? e.clientX - this.originX : e.changedTouches[0].pageX - this.originX;
-      const moveY = type === "mouse" ? e.clientY - this.originY : e.changedTouches[0].pageY - this.originY;
-      if (moveX < 0 || moveX + 38 >= this.w) return false;
-      this.sliderLeft = moveX + "px";
-      let blockLeft = (this.w - 40 - 20) / (this.w - 40) * moveX;
-      this.block.style.left = blockLeft + "px";
-      this.containerActive = true; // add active
-      this.sliderMaskWidth = moveX + "px";
-      this.trail.push(moveY);
-    }),
-    handleMoveEndEvent(e, type = "mouse") {
-      if (!this.isMouseDown) return false;
-      this.isMouseDown = false;
-      if (type === "mouse" && e.clientX === this.originX || type === "touch" && e.changedTouches[0].pageX === this.originX) return false;
-      this.containerActive = false; // remove active
-      this.timestamp = +new Date() - this.timestamp;
-      const {
-        spliced,
-        TuringTest
-      } = this.verify();
-      if (spliced) {
-        if (this.accuracy === -1) {
-          this.containerSuccess = true;
-          this.success = true;
-          this.$emit("success", this.timestamp);
-          return;
-        }
-        if (TuringTest) {
-          // succ
-          this.containerSuccess = true;
-          this.success = true;
-          this.$emit("success", this.timestamp);
-        } else {
-          this.containerFail = true;
-          this.$emit("again");
-        }
-      } else {
-        this.containerFail = true;
-        this.$emit("fail");
-        setTimeout(() => {
-          this.reset();
-        }, 1000);
-      }
-    },
-    verify() {
-      const arr = this.trail; // drag y move distance
-      const average = arr.reduce(sum) / arr.length; // average
-      const deviations = arr.map(x => x - average); // deviation array
-      const stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length); // standard deviation
-      const left = parseInt(this.block.style.left);
-      const accuracy = this.accuracy <= 1 ? 1 : this.accuracy > 10 ? 10 : this.accuracy;
-      return {
-        spliced: Math.abs(left - this.block_x) <= accuracy,
-        TuringTest: average !== stddev // equal => not person operate
-      };
+    onSuccess() {
+      this.isShow = false;
+      console.log(344444);
     },
-
-    reset() {
-      this.success = false;
-      this.containerActive = false;
-      this.containerSuccess = false;
-      this.containerFail = false;
-      this.sliderLeft = 0;
-      this.block.style.left = 0;
-      this.sliderMaskWidth = 0;
-      // canvas
-      let {
-        w,
-        h
-      } = this;
-      this.canvasCtx.clearRect(0, 0, w, h);
-      this.blockCtx.clearRect(0, 0, w, h);
-      this.block.width = w;
-
-      // generate img
-      this.img.src = this.getRandomImg();
-      this.$emit("fulfilled");
+    onFail() {},
+    onAgain() {},
+    onRefresh() {},
+    onFulfilled() {},
+    handleClose() {
+      this.isShow = false;
     }
-  },
-  destroyed() {
-    document.removeEventListener("mousemove", this.handleMoveEvent);
-    document.removeEventListener("mouseup", this.handleMoveEndEvent);
   }
 });
-function throttle(fn, interval = 50, options = {
-  leading: true,
-  trailing: true
-}) {
-  const {
-    leading,
-    trailing,
-    resultCallback
-  } = options;
-  let lastTime = 0;
-  let timer = null;
-  const _throttle = function (...args) {
-    return new Promise((resolve, reject) => {
-      const nowTime = new Date().getTime();
-      if (!lastTime && !leading) lastTime = nowTime;
-      const remainTime = interval - (nowTime - lastTime);
-      if (remainTime <= 0) {
-        if (timer) {
-          clearTimeout(timer);
-          timer = null;
-        }
-        const result = fn.apply(this, args);
-        if (resultCallback) resultCallback(result);
-        resolve(result);
-        lastTime = nowTime;
-        return;
-      }
-      if (trailing && !timer) {
-        timer = setTimeout(() => {
-          timer = null;
-          lastTime = !leading ? 0 : new Date().getTime();
-          const result = fn.apply(this, args);
-          if (resultCallback) resultCallback(result);
-          resolve(result);
-        }, remainTime);
-      }
-    });
-  };
-  _throttle.cancel = function () {
-    if (timer) clearTimeout(timer);
-    timer = null;
-    lastTime = 0;
-  };
-  return _throttle;
-}
-;// CONCATENATED MODULE: ./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue?vue&type=script&lang=js&
- /* harmony default export */ var lib_slide_verifyvue_type_script_lang_js_ = (slide_verifyvue_type_script_lang_js_); 
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-54.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-54.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue?vue&type=style&index=0&id=b67196d8&prod&scoped=true&lang=css&
-// extracted by mini-css-extract-plugin
-
-;// CONCATENATED MODULE: ./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue?vue&type=style&index=0&id=b67196d8&prod&scoped=true&lang=css&
-
+;// CONCATENATED MODULE: ./src/components/YcSlideVerify/index.vue?vue&type=script&lang=js&
+ /* harmony default export */ var components_YcSlideVerifyvue_type_script_lang_js_ = (YcSlideVerifyvue_type_script_lang_js_); 
 ;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
 
@@ -2378,69 +2022,6 @@ function normalizeComponent(
   }
 }
 
-;// CONCATENATED MODULE: ./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue
-
-
-
-;
-
-
-/* normalize component */
-
-var component = normalizeComponent(
-  lib_slide_verifyvue_type_script_lang_js_,
-  slide_verifyvue_type_template_id_b67196d8_scoped_true_render,
-  slide_verifyvue_type_template_id_b67196d8_scoped_true_staticRenderFns,
-  false,
-  null,
-  "b67196d8",
-  null
-  
-)
-
-/* harmony default export */ var slide_verify = (component.exports);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/YcSlideVerify/index.vue?vue&type=script&lang=js&
-
-
-/* harmony default export */ var YcSlideVerifyvue_type_script_lang_js_ = ({
-  name: "YcSlideVerify",
-  components: {
-    SlideVerify: slide_verify
-  },
-  data() {
-    return {
-      show: true,
-      isShow: false,
-      accuracy: 5,
-      sliderText: "拖动完成上方拼图",
-      countDownNum: 120
-    };
-  },
-  computed: {
-    imgs() {
-      const list = [];
-      for (let i = 1; i < 9; i++) {
-        list.push(__webpack_require__(4359)(`./${i}.jpg`));
-      }
-      return list;
-    }
-  },
-  methods: {
-    onSuccess() {
-      this.isShow = false;
-      console.log(344444);
-    },
-    onFail() {},
-    onAgain() {},
-    onRefresh() {},
-    onFulfilled() {},
-    handleClose() {
-      this.isShow = false;
-    }
-  }
-});
-;// CONCATENATED MODULE: ./src/components/YcSlideVerify/index.vue?vue&type=script&lang=js&
- /* harmony default export */ var components_YcSlideVerifyvue_type_script_lang_js_ = (YcSlideVerifyvue_type_script_lang_js_); 
 ;// CONCATENATED MODULE: ./src/components/YcSlideVerify/index.vue
 
 
@@ -2449,7 +2030,7 @@ var component = normalizeComponent(
 
 /* normalize component */
 ;
-var YcSlideVerify_component = normalizeComponent(
+var component = normalizeComponent(
   components_YcSlideVerifyvue_type_script_lang_js_,
   render,
   staticRenderFns,
@@ -2460,7 +2041,7 @@ var YcSlideVerify_component = normalizeComponent(
   
 )
 
-/* harmony default export */ var YcSlideVerify = (YcSlideVerify_component.exports);
+/* harmony default export */ var YcSlideVerify = (component.exports);
 ;// CONCATENATED MODULE: ./src/packages/index.js
 
 const components = [YcSlideVerify];