yc-ui2 0.1.0-beta6 → 0.1.0-beta8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1843,7 +1843,7 @@ if (typeof window !== 'undefined') {
1843
1843
  // Indicate to webpack that this file can be concatenated
1844
1844
  /* harmony default export */ var setPublicPath = (null);
1845
1845
 
1846
- ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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&
1846
+ ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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&
1847
1847
  var render = function render() {
1848
1848
  var _vm = this,
1849
1849
  _c = _vm._self._c;
@@ -1872,404 +1872,48 @@ var staticRenderFns = [];
1872
1872
 
1873
1873
  // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
1874
1874
  var es_array_push = __webpack_require__(7658);
1875
- ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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&
1876
- var slide_verifyvue_type_template_id_b67196d8_scoped_true_render = function render() {
1877
- var _vm = this,
1878
- _c = _vm._self._c;
1879
- return _c('div', {
1880
- staticClass: "slide-verify",
1881
- style: {
1882
- width: _vm.w + 'px'
1883
- },
1884
- attrs: {
1885
- "id": "slideVerify",
1886
- "onselectstart": "return false;"
1887
- }
1888
- }, [_c('div', {
1889
- class: {
1890
- 'slider-verify-loading': _vm.loadBlock
1891
- }
1892
- }), _c('canvas', {
1893
- ref: "canvas",
1894
- attrs: {
1895
- "width": _vm.w,
1896
- "height": _vm.h
1897
- }
1898
- }), _vm.show ? _c('div', {
1899
- staticClass: "slide-verify-refresh-icon",
1900
- on: {
1901
- "click": _vm.refresh
1902
- }
1903
- }) : _vm._e(), _c('canvas', {
1904
- ref: "block",
1905
- staticClass: "slide-verify-block",
1906
- attrs: {
1907
- "width": _vm.w,
1908
- "height": _vm.h
1909
- }
1910
- }), _c('div', {
1911
- staticClass: "slide-verify-slider",
1912
- class: {
1913
- 'container-active': _vm.containerActive,
1914
- 'container-success': _vm.containerSuccess,
1915
- 'container-fail': _vm.containerFail
1916
- }
1917
- }, [_c('div', {
1918
- staticClass: "slide-verify-slider-mask",
1919
- style: {
1920
- width: _vm.sliderMaskWidth
1921
- }
1922
- }, [_c('div', {
1923
- staticClass: "slide-verify-slider-mask-item",
1924
- style: {
1925
- left: _vm.sliderLeft
1926
- },
1927
- on: {
1928
- "mousedown": _vm.sliderDown,
1929
- "touchstart": _vm.touchStartEvent,
1930
- "touchmove": function ($event) {
1931
- return _vm.handleMoveEvent($event, 'touch');
1932
- },
1933
- "touchend": function ($event) {
1934
- return _vm.handleMoveEndEvent($event, 'touch');
1935
- }
1936
- }
1937
- }, [_c('div', {
1938
- staticClass: "slide-verify-slider-mask-item-icon"
1939
- })])]), _c('span', {
1940
- staticClass: "slide-verify-slider-text"
1941
- }, [_vm._v(_vm._s(_vm.sliderText))])])]);
1942
- };
1943
- var slide_verifyvue_type_template_id_b67196d8_scoped_true_staticRenderFns = [];
1944
-
1945
- ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.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&
1946
-
1947
- const PI = Math.PI;
1948
- function sum(x, y) {
1949
- return x + y;
1950
- }
1951
- function square(x) {
1952
- return x * x;
1953
- }
1954
- /* harmony default export */ var slide_verifyvue_type_script_lang_js_ = ({
1955
- name: "SlideVerify",
1956
- props: {
1957
- // block length
1958
- l: {
1959
- type: Number,
1960
- default: 42
1961
- },
1962
- // block radius
1963
- r: {
1964
- type: Number,
1965
- default: 10
1966
- },
1967
- // canvas width
1968
- w: {
1969
- type: Number,
1970
- default: 310
1971
- },
1972
- // canvas height
1973
- h: {
1974
- type: Number,
1975
- default: 155
1976
- },
1977
- sliderText: {
1978
- type: String,
1979
- default: "Slide filled right"
1980
- },
1981
- accuracy: {
1982
- type: Number,
1983
- default: 5 // 若为 -1 则不进行机器判断
1984
- },
1875
+ ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/YcSlideVerify/index.vue?vue&type=script&lang=js&
1985
1876
 
1986
- show: {
1987
- type: Boolean,
1988
- default: true
1989
- },
1990
- imgs: {
1991
- type: Array,
1992
- default: () => []
1993
- }
1877
+ // import SlideVerify from "vue-monoplasty-slide-verify/src/lib/slide-verify.vue"
1878
+ /* harmony default export */ var YcSlideVerifyvue_type_script_lang_js_ = ({
1879
+ name: "YcSlideVerify",
1880
+ components: {
1881
+ // SlideVerify,
1994
1882
  },
1995
1883
  data() {
1996
1884
  return {
1997
- containerActive: false,
1998
- // container active class
1999
- containerSuccess: false,
2000
- // container success class
2001
- containerFail: false,
2002
- // container fail class
2003
- canvasCtx: null,
2004
- blockCtx: null,
2005
- block: null,
2006
- block_x: undefined,
2007
- // container random position
2008
- block_y: undefined,
2009
- L: this.l + this.r * 2 + 3,
2010
- // block real length
2011
- img: undefined,
2012
- originX: undefined,
2013
- originY: undefined,
2014
- isMouseDown: false,
2015
- trail: [],
2016
- sliderLeft: 0,
2017
- // block right offset
2018
- sliderMaskWidth: 0,
2019
- // mask width,
2020
- success: false,
2021
- // Bug Fixes 修复了验证成功后还能滑动
2022
- loadBlock: true,
2023
- // Features 图片加载提示,防止图片没加载完就开始验证
2024
- timestamp: null
1885
+ show: true,
1886
+ isShow: false,
1887
+ accuracy: 5,
1888
+ sliderText: "拖动完成上方拼图",
1889
+ countDownNum: 120
2025
1890
  };
2026
1891
  },
2027
- mounted() {
2028
- this.init();
1892
+ computed: {
1893
+ imgs() {
1894
+ const list = [];
1895
+ for (let i = 1; i < 9; i++) {
1896
+ list.push(__webpack_require__(4359)(`./${i}.jpg`));
1897
+ }
1898
+ return list;
1899
+ }
2029
1900
  },
2030
1901
  methods: {
2031
- init() {
2032
- this.initDom();
2033
- this.initImg();
2034
- this.bindEvents();
2035
- },
2036
- initDom() {
2037
- this.block = this.$refs.block;
2038
- this.canvasCtx = this.$refs.canvas.getContext("2d");
2039
- this.blockCtx = this.block.getContext("2d");
2040
- },
2041
- initImg() {
2042
- const img = this.createImg(() => {
2043
- // 图片加载完关闭遮蔽罩
2044
- this.loadBlock = false;
2045
- this.drawBlock();
2046
- this.canvasCtx.drawImage(img, 0, 0, this.w, this.h);
2047
- this.blockCtx.drawImage(img, 0, 0, this.w, this.h);
2048
- let {
2049
- block_x: x,
2050
- block_y: y,
2051
- r,
2052
- L
2053
- } = this;
2054
- let _y = y - r * 2 - 1;
2055
- let ImageData = this.blockCtx.getImageData(x, _y, L, L);
2056
- this.block.width = L;
2057
- this.blockCtx.putImageData(ImageData, 0, _y);
2058
- });
2059
- this.img = img;
2060
- },
2061
- drawBlock() {
2062
- this.block_x = this.getRandomNumberByRange(this.L + 10, this.w - (this.L + 10));
2063
- this.block_y = this.getRandomNumberByRange(10 + this.r * 2, this.h - (this.L + 10));
2064
- this.draw(this.canvasCtx, this.block_x, this.block_y, "fill");
2065
- this.draw(this.blockCtx, this.block_x, this.block_y, "clip");
2066
- },
2067
- draw(ctx, x, y, operation) {
2068
- let {
2069
- l,
2070
- r
2071
- } = this;
2072
- ctx.beginPath();
2073
- ctx.moveTo(x, y);
2074
- ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);
2075
- ctx.lineTo(x + l, y);
2076
- ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI);
2077
- ctx.lineTo(x + l, y + l);
2078
- ctx.lineTo(x, y + l);
2079
- ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true);
2080
- ctx.lineTo(x, y);
2081
- ctx.lineWidth = 2;
2082
- ctx.fillStyle = "rgba(255, 255, 255, 0.7)";
2083
- ctx.strokeStyle = "rgba(255, 255, 255, 0.7)";
2084
- ctx.stroke();
2085
- ctx[operation]();
2086
- // Bug Fixes 修复了火狐和ie显示问题
2087
- ctx.globalCompositeOperation = "destination-over";
2088
- },
2089
- createImg(onload) {
2090
- const img = document.createElement("img");
2091
- img.crossOrigin = "Anonymous";
2092
- img.onload = onload;
2093
- img.onerror = () => {
2094
- img.src = this.getRandomImg();
2095
- };
2096
- img.src = this.getRandomImg();
2097
- return img;
2098
- },
2099
- // 随机生成img src
2100
- getRandomImg() {
2101
- // return require('../assets/img.jpg')
2102
- const len = this.imgs.length;
2103
- return len > 0 ? this.imgs[this.getRandomNumberByRange(0, len - 1)] :
2104
- // "https://bing.ioliu.cn/v1/rand?w=300&h=150";
2105
- "https://source.unsplash.com/300x150/?book,library";
2106
- // "https://api.dujin.org/pic/fengjing";
2107
- },
2108
-
2109
- getRandomNumberByRange(start, end) {
2110
- return Math.round(Math.random() * (end - start) + start);
2111
- },
2112
- refresh() {
2113
- this.reset();
2114
- this.$emit("refresh");
2115
- },
2116
- sliderDown(event) {
2117
- if (this.success) return;
2118
- this.originX = event.clientX;
2119
- this.originY = event.clientY;
2120
- this.isMouseDown = true;
2121
- this.timestamp = +new Date();
2122
- },
2123
- touchStartEvent(e) {
2124
- if (this.success) return;
2125
- this.originX = e.changedTouches[0].pageX;
2126
- this.originY = e.changedTouches[0].pageY;
2127
- this.isMouseDown = true;
2128
- this.timestamp = +new Date();
2129
- },
2130
- bindEvents() {
2131
- document.addEventListener("mousemove", this.handleMoveEvent);
2132
- document.addEventListener("mouseup", this.handleMoveEndEvent);
2133
- },
2134
- // 处理函数抽离
2135
- handleMoveEvent: throttle(function (e, type = "mouse") {
2136
- if (!this.isMouseDown) return false;
2137
- const moveX = type === "mouse" ? e.clientX - this.originX : e.changedTouches[0].pageX - this.originX;
2138
- const moveY = type === "mouse" ? e.clientY - this.originY : e.changedTouches[0].pageY - this.originY;
2139
- if (moveX < 0 || moveX + 38 >= this.w) return false;
2140
- this.sliderLeft = moveX + "px";
2141
- let blockLeft = (this.w - 40 - 20) / (this.w - 40) * moveX;
2142
- this.block.style.left = blockLeft + "px";
2143
- this.containerActive = true; // add active
2144
- this.sliderMaskWidth = moveX + "px";
2145
- this.trail.push(moveY);
2146
- }),
2147
- handleMoveEndEvent(e, type = "mouse") {
2148
- if (!this.isMouseDown) return false;
2149
- this.isMouseDown = false;
2150
- if (type === "mouse" && e.clientX === this.originX || type === "touch" && e.changedTouches[0].pageX === this.originX) return false;
2151
- this.containerActive = false; // remove active
2152
- this.timestamp = +new Date() - this.timestamp;
2153
- const {
2154
- spliced,
2155
- TuringTest
2156
- } = this.verify();
2157
- if (spliced) {
2158
- if (this.accuracy === -1) {
2159
- this.containerSuccess = true;
2160
- this.success = true;
2161
- this.$emit("success", this.timestamp);
2162
- return;
2163
- }
2164
- if (TuringTest) {
2165
- // succ
2166
- this.containerSuccess = true;
2167
- this.success = true;
2168
- this.$emit("success", this.timestamp);
2169
- } else {
2170
- this.containerFail = true;
2171
- this.$emit("again");
2172
- }
2173
- } else {
2174
- this.containerFail = true;
2175
- this.$emit("fail");
2176
- setTimeout(() => {
2177
- this.reset();
2178
- }, 1000);
2179
- }
2180
- },
2181
- verify() {
2182
- const arr = this.trail; // drag y move distance
2183
- const average = arr.reduce(sum) / arr.length; // average
2184
- const deviations = arr.map(x => x - average); // deviation array
2185
- const stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length); // standard deviation
2186
- const left = parseInt(this.block.style.left);
2187
- const accuracy = this.accuracy <= 1 ? 1 : this.accuracy > 10 ? 10 : this.accuracy;
2188
- return {
2189
- spliced: Math.abs(left - this.block_x) <= accuracy,
2190
- TuringTest: average !== stddev // equal => not person operate
2191
- };
1902
+ onSuccess() {
1903
+ this.isShow = false;
1904
+ console.log(344444);
2192
1905
  },
2193
-
2194
- reset() {
2195
- this.success = false;
2196
- this.containerActive = false;
2197
- this.containerSuccess = false;
2198
- this.containerFail = false;
2199
- this.sliderLeft = 0;
2200
- this.block.style.left = 0;
2201
- this.sliderMaskWidth = 0;
2202
- // canvas
2203
- let {
2204
- w,
2205
- h
2206
- } = this;
2207
- this.canvasCtx.clearRect(0, 0, w, h);
2208
- this.blockCtx.clearRect(0, 0, w, h);
2209
- this.block.width = w;
2210
-
2211
- // generate img
2212
- this.img.src = this.getRandomImg();
2213
- this.$emit("fulfilled");
1906
+ onFail() {},
1907
+ onAgain() {},
1908
+ onRefresh() {},
1909
+ onFulfilled() {},
1910
+ handleClose() {
1911
+ this.isShow = false;
2214
1912
  }
2215
- },
2216
- destroyed() {
2217
- document.removeEventListener("mousemove", this.handleMoveEvent);
2218
- document.removeEventListener("mouseup", this.handleMoveEndEvent);
2219
1913
  }
2220
1914
  });
2221
- function throttle(fn, interval = 50, options = {
2222
- leading: true,
2223
- trailing: true
2224
- }) {
2225
- const {
2226
- leading,
2227
- trailing,
2228
- resultCallback
2229
- } = options;
2230
- let lastTime = 0;
2231
- let timer = null;
2232
- const _throttle = function (...args) {
2233
- return new Promise((resolve, reject) => {
2234
- const nowTime = new Date().getTime();
2235
- if (!lastTime && !leading) lastTime = nowTime;
2236
- const remainTime = interval - (nowTime - lastTime);
2237
- if (remainTime <= 0) {
2238
- if (timer) {
2239
- clearTimeout(timer);
2240
- timer = null;
2241
- }
2242
- const result = fn.apply(this, args);
2243
- if (resultCallback) resultCallback(result);
2244
- resolve(result);
2245
- lastTime = nowTime;
2246
- return;
2247
- }
2248
- if (trailing && !timer) {
2249
- timer = setTimeout(() => {
2250
- timer = null;
2251
- lastTime = !leading ? 0 : new Date().getTime();
2252
- const result = fn.apply(this, args);
2253
- if (resultCallback) resultCallback(result);
2254
- resolve(result);
2255
- }, remainTime);
2256
- }
2257
- });
2258
- };
2259
- _throttle.cancel = function () {
2260
- if (timer) clearTimeout(timer);
2261
- timer = null;
2262
- lastTime = 0;
2263
- };
2264
- return _throttle;
2265
- }
2266
- ;// CONCATENATED MODULE: ./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue?vue&type=script&lang=js&
2267
- /* harmony default export */ var lib_slide_verifyvue_type_script_lang_js_ = (slide_verifyvue_type_script_lang_js_);
2268
- ;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.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&
2269
- // extracted by mini-css-extract-plugin
2270
-
2271
- ;// 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&
2272
-
1915
+ ;// CONCATENATED MODULE: ./src/components/YcSlideVerify/index.vue?vue&type=script&lang=js&
1916
+ /* harmony default export */ var components_YcSlideVerifyvue_type_script_lang_js_ = (YcSlideVerifyvue_type_script_lang_js_);
2273
1917
  ;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
2274
1918
  /* globals __VUE_SSR_CONTEXT__ */
2275
1919
 
@@ -2368,69 +2012,6 @@ function normalizeComponent(
2368
2012
  }
2369
2013
  }
2370
2014
 
2371
- ;// CONCATENATED MODULE: ./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue
2372
-
2373
-
2374
-
2375
- ;
2376
-
2377
-
2378
- /* normalize component */
2379
-
2380
- var component = normalizeComponent(
2381
- lib_slide_verifyvue_type_script_lang_js_,
2382
- slide_verifyvue_type_template_id_b67196d8_scoped_true_render,
2383
- slide_verifyvue_type_template_id_b67196d8_scoped_true_staticRenderFns,
2384
- false,
2385
- null,
2386
- "b67196d8",
2387
- null
2388
-
2389
- )
2390
-
2391
- /* harmony default export */ var slide_verify = (component.exports);
2392
- ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/YcSlideVerify/index.vue?vue&type=script&lang=js&
2393
-
2394
-
2395
- /* harmony default export */ var YcSlideVerifyvue_type_script_lang_js_ = ({
2396
- name: "YcSlideVerify",
2397
- components: {
2398
- SlideVerify: slide_verify
2399
- },
2400
- data() {
2401
- return {
2402
- show: true,
2403
- isShow: false,
2404
- accuracy: 5,
2405
- sliderText: "拖动完成上方拼图",
2406
- countDownNum: 120
2407
- };
2408
- },
2409
- computed: {
2410
- imgs() {
2411
- const list = [];
2412
- for (let i = 1; i < 9; i++) {
2413
- list.push(__webpack_require__(4359)(`./${i}.jpg`));
2414
- }
2415
- return list;
2416
- }
2417
- },
2418
- methods: {
2419
- onSuccess() {
2420
- this.isShow = false;
2421
- console.log(344444);
2422
- },
2423
- onFail() {},
2424
- onAgain() {},
2425
- onRefresh() {},
2426
- onFulfilled() {},
2427
- handleClose() {
2428
- this.isShow = false;
2429
- }
2430
- }
2431
- });
2432
- ;// CONCATENATED MODULE: ./src/components/YcSlideVerify/index.vue?vue&type=script&lang=js&
2433
- /* harmony default export */ var components_YcSlideVerifyvue_type_script_lang_js_ = (YcSlideVerifyvue_type_script_lang_js_);
2434
2015
  ;// CONCATENATED MODULE: ./src/components/YcSlideVerify/index.vue
2435
2016
 
2436
2017
 
@@ -2439,7 +2020,7 @@ var component = normalizeComponent(
2439
2020
 
2440
2021
  /* normalize component */
2441
2022
  ;
2442
- var YcSlideVerify_component = normalizeComponent(
2023
+ var component = normalizeComponent(
2443
2024
  components_YcSlideVerifyvue_type_script_lang_js_,
2444
2025
  render,
2445
2026
  staticRenderFns,
@@ -2450,7 +2031,7 @@ var YcSlideVerify_component = normalizeComponent(
2450
2031
 
2451
2032
  )
2452
2033
 
2453
- /* harmony default export */ var YcSlideVerify = (YcSlideVerify_component.exports);
2034
+ /* harmony default export */ var YcSlideVerify = (component.exports);
2454
2035
  ;// CONCATENATED MODULE: ./src/packages/index.js
2455
2036
 
2456
2037
  const components = [YcSlideVerify];