yc-ui2 0.1.2-beta25 → 0.1.2-beta26
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/yc-ui2.common.js +529 -369
- package/dist/yc-ui2.common.js.map +1 -1
- package/dist/yc-ui2.css +1 -1
- package/dist/yc-ui2.umd.js +529 -369
- package/dist/yc-ui2.umd.js.map +1 -1
- package/dist/yc-ui2.umd.min.js +1 -1
- package/dist/yc-ui2.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/dist/css/286.00e562fe.css +0 -1
- package/dist/css/774.de9a931f.css +0 -139
- package/dist/css/94.de9a931f.css +0 -139
- package/dist/yc-ui2.common.94.js +0 -442
- package/dist/yc-ui2.common.94.js.map +0 -1
- package/dist/yc-ui2.umd.774.js +0 -442
- package/dist/yc-ui2.umd.774.js.map +0 -1
- package/dist/yc-ui2.umd.min.286.js +0 -2
- package/dist/yc-ui2.umd.min.286.js.map +0 -1
package/dist/yc-ui2.umd.774.js
DELETED
@@ -1,442 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
((typeof self !== 'undefined' ? self : this)["webpackChunkyc_ui2"] = (typeof self !== 'undefined' ? self : this)["webpackChunkyc_ui2"] || []).push([[774],{
|
3
|
-
|
4
|
-
/***/ 6774:
|
5
|
-
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
6
|
-
|
7
|
-
// ESM COMPAT FLAG
|
8
|
-
__webpack_require__.r(__webpack_exports__);
|
9
|
-
|
10
|
-
// EXPORTS
|
11
|
-
__webpack_require__.d(__webpack_exports__, {
|
12
|
-
"default": function() { return /* binding */ slide_verify; }
|
13
|
-
});
|
14
|
-
|
15
|
-
;// 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&
|
16
|
-
var render = function render() {
|
17
|
-
var _vm = this,
|
18
|
-
_c = _vm._self._c;
|
19
|
-
return _c('div', {
|
20
|
-
staticClass: "slide-verify",
|
21
|
-
style: {
|
22
|
-
width: _vm.w + 'px'
|
23
|
-
},
|
24
|
-
attrs: {
|
25
|
-
"id": "slideVerify",
|
26
|
-
"onselectstart": "return false;"
|
27
|
-
}
|
28
|
-
}, [_c('div', {
|
29
|
-
class: {
|
30
|
-
'slider-verify-loading': _vm.loadBlock
|
31
|
-
}
|
32
|
-
}), _c('canvas', {
|
33
|
-
ref: "canvas",
|
34
|
-
attrs: {
|
35
|
-
"width": _vm.w,
|
36
|
-
"height": _vm.h
|
37
|
-
}
|
38
|
-
}), _vm.show ? _c('div', {
|
39
|
-
staticClass: "slide-verify-refresh-icon",
|
40
|
-
on: {
|
41
|
-
"click": _vm.refresh
|
42
|
-
}
|
43
|
-
}) : _vm._e(), _c('canvas', {
|
44
|
-
ref: "block",
|
45
|
-
staticClass: "slide-verify-block",
|
46
|
-
attrs: {
|
47
|
-
"width": _vm.w,
|
48
|
-
"height": _vm.h
|
49
|
-
}
|
50
|
-
}), _c('div', {
|
51
|
-
staticClass: "slide-verify-slider",
|
52
|
-
class: {
|
53
|
-
'container-active': _vm.containerActive,
|
54
|
-
'container-success': _vm.containerSuccess,
|
55
|
-
'container-fail': _vm.containerFail
|
56
|
-
}
|
57
|
-
}, [_c('div', {
|
58
|
-
staticClass: "slide-verify-slider-mask",
|
59
|
-
style: {
|
60
|
-
width: _vm.sliderMaskWidth
|
61
|
-
}
|
62
|
-
}, [_c('div', {
|
63
|
-
staticClass: "slide-verify-slider-mask-item",
|
64
|
-
style: {
|
65
|
-
left: _vm.sliderLeft
|
66
|
-
},
|
67
|
-
on: {
|
68
|
-
"mousedown": _vm.sliderDown,
|
69
|
-
"touchstart": _vm.touchStartEvent,
|
70
|
-
"touchmove": function ($event) {
|
71
|
-
return _vm.handleMoveEvent($event, 'touch');
|
72
|
-
},
|
73
|
-
"touchend": function ($event) {
|
74
|
-
return _vm.handleMoveEndEvent($event, 'touch');
|
75
|
-
}
|
76
|
-
}
|
77
|
-
}, [_c('div', {
|
78
|
-
staticClass: "slide-verify-slider-mask-item-icon"
|
79
|
-
})])]), _c('span', {
|
80
|
-
staticClass: "slide-verify-slider-text"
|
81
|
-
}, [_vm._v(_vm._s(_vm.sliderText))])])]);
|
82
|
-
};
|
83
|
-
var staticRenderFns = [];
|
84
|
-
|
85
|
-
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
|
86
|
-
var es_array_push = __webpack_require__(7658);
|
87
|
-
;// 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&
|
88
|
-
|
89
|
-
const PI = Math.PI;
|
90
|
-
function sum(x, y) {
|
91
|
-
return x + y;
|
92
|
-
}
|
93
|
-
function square(x) {
|
94
|
-
return x * x;
|
95
|
-
}
|
96
|
-
/* harmony default export */ var slide_verifyvue_type_script_lang_js_ = ({
|
97
|
-
name: "SlideVerify",
|
98
|
-
props: {
|
99
|
-
// block length
|
100
|
-
l: {
|
101
|
-
type: Number,
|
102
|
-
default: 42
|
103
|
-
},
|
104
|
-
// block radius
|
105
|
-
r: {
|
106
|
-
type: Number,
|
107
|
-
default: 10
|
108
|
-
},
|
109
|
-
// canvas width
|
110
|
-
w: {
|
111
|
-
type: Number,
|
112
|
-
default: 310
|
113
|
-
},
|
114
|
-
// canvas height
|
115
|
-
h: {
|
116
|
-
type: Number,
|
117
|
-
default: 155
|
118
|
-
},
|
119
|
-
sliderText: {
|
120
|
-
type: String,
|
121
|
-
default: "Slide filled right"
|
122
|
-
},
|
123
|
-
accuracy: {
|
124
|
-
type: Number,
|
125
|
-
default: 5 // 若为 -1 则不进行机器判断
|
126
|
-
},
|
127
|
-
|
128
|
-
show: {
|
129
|
-
type: Boolean,
|
130
|
-
default: true
|
131
|
-
},
|
132
|
-
imgs: {
|
133
|
-
type: Array,
|
134
|
-
default: () => []
|
135
|
-
}
|
136
|
-
},
|
137
|
-
data() {
|
138
|
-
return {
|
139
|
-
containerActive: false,
|
140
|
-
// container active class
|
141
|
-
containerSuccess: false,
|
142
|
-
// container success class
|
143
|
-
containerFail: false,
|
144
|
-
// container fail class
|
145
|
-
canvasCtx: null,
|
146
|
-
blockCtx: null,
|
147
|
-
block: null,
|
148
|
-
block_x: undefined,
|
149
|
-
// container random position
|
150
|
-
block_y: undefined,
|
151
|
-
L: this.l + this.r * 2 + 3,
|
152
|
-
// block real length
|
153
|
-
img: undefined,
|
154
|
-
originX: undefined,
|
155
|
-
originY: undefined,
|
156
|
-
isMouseDown: false,
|
157
|
-
trail: [],
|
158
|
-
sliderLeft: 0,
|
159
|
-
// block right offset
|
160
|
-
sliderMaskWidth: 0,
|
161
|
-
// mask width,
|
162
|
-
success: false,
|
163
|
-
// Bug Fixes 修复了验证成功后还能滑动
|
164
|
-
loadBlock: true,
|
165
|
-
// Features 图片加载提示,防止图片没加载完就开始验证
|
166
|
-
timestamp: null
|
167
|
-
};
|
168
|
-
},
|
169
|
-
mounted() {
|
170
|
-
this.init();
|
171
|
-
},
|
172
|
-
methods: {
|
173
|
-
init() {
|
174
|
-
this.initDom();
|
175
|
-
this.initImg();
|
176
|
-
this.bindEvents();
|
177
|
-
},
|
178
|
-
initDom() {
|
179
|
-
this.block = this.$refs.block;
|
180
|
-
this.canvasCtx = this.$refs.canvas.getContext("2d");
|
181
|
-
this.blockCtx = this.block.getContext("2d");
|
182
|
-
},
|
183
|
-
initImg() {
|
184
|
-
const img = this.createImg(() => {
|
185
|
-
// 图片加载完关闭遮蔽罩
|
186
|
-
this.loadBlock = false;
|
187
|
-
this.drawBlock();
|
188
|
-
this.canvasCtx.drawImage(img, 0, 0, this.w, this.h);
|
189
|
-
this.blockCtx.drawImage(img, 0, 0, this.w, this.h);
|
190
|
-
let {
|
191
|
-
block_x: x,
|
192
|
-
block_y: y,
|
193
|
-
r,
|
194
|
-
L
|
195
|
-
} = this;
|
196
|
-
let _y = y - r * 2 - 1;
|
197
|
-
let ImageData = this.blockCtx.getImageData(x, _y, L, L);
|
198
|
-
this.block.width = L;
|
199
|
-
this.blockCtx.putImageData(ImageData, 0, _y);
|
200
|
-
});
|
201
|
-
this.img = img;
|
202
|
-
},
|
203
|
-
drawBlock() {
|
204
|
-
this.block_x = this.getRandomNumberByRange(this.L + 10, this.w - (this.L + 10));
|
205
|
-
this.block_y = this.getRandomNumberByRange(10 + this.r * 2, this.h - (this.L + 10));
|
206
|
-
this.draw(this.canvasCtx, this.block_x, this.block_y, "fill");
|
207
|
-
this.draw(this.blockCtx, this.block_x, this.block_y, "clip");
|
208
|
-
},
|
209
|
-
draw(ctx, x, y, operation) {
|
210
|
-
let {
|
211
|
-
l,
|
212
|
-
r
|
213
|
-
} = this;
|
214
|
-
ctx.beginPath();
|
215
|
-
ctx.moveTo(x, y);
|
216
|
-
ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);
|
217
|
-
ctx.lineTo(x + l, y);
|
218
|
-
ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI);
|
219
|
-
ctx.lineTo(x + l, y + l);
|
220
|
-
ctx.lineTo(x, y + l);
|
221
|
-
ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true);
|
222
|
-
ctx.lineTo(x, y);
|
223
|
-
ctx.lineWidth = 2;
|
224
|
-
ctx.fillStyle = "rgba(255, 255, 255, 0.7)";
|
225
|
-
ctx.strokeStyle = "rgba(255, 255, 255, 0.7)";
|
226
|
-
ctx.stroke();
|
227
|
-
ctx[operation]();
|
228
|
-
// Bug Fixes 修复了火狐和ie显示问题
|
229
|
-
ctx.globalCompositeOperation = "destination-over";
|
230
|
-
},
|
231
|
-
createImg(onload) {
|
232
|
-
const img = document.createElement("img");
|
233
|
-
img.crossOrigin = "Anonymous";
|
234
|
-
img.onload = onload;
|
235
|
-
img.onerror = () => {
|
236
|
-
img.src = this.getRandomImg();
|
237
|
-
};
|
238
|
-
img.src = this.getRandomImg();
|
239
|
-
return img;
|
240
|
-
},
|
241
|
-
// 随机生成img src
|
242
|
-
getRandomImg() {
|
243
|
-
// return require('../assets/img.jpg')
|
244
|
-
const len = this.imgs.length;
|
245
|
-
return len > 0 ? this.imgs[this.getRandomNumberByRange(0, len - 1)] :
|
246
|
-
// "https://bing.ioliu.cn/v1/rand?w=300&h=150";
|
247
|
-
"https://source.unsplash.com/300x150/?book,library";
|
248
|
-
// "https://api.dujin.org/pic/fengjing";
|
249
|
-
},
|
250
|
-
|
251
|
-
getRandomNumberByRange(start, end) {
|
252
|
-
return Math.round(Math.random() * (end - start) + start);
|
253
|
-
},
|
254
|
-
refresh() {
|
255
|
-
this.reset();
|
256
|
-
this.$emit("refresh");
|
257
|
-
},
|
258
|
-
sliderDown(event) {
|
259
|
-
if (this.success) return;
|
260
|
-
this.originX = event.clientX;
|
261
|
-
this.originY = event.clientY;
|
262
|
-
this.isMouseDown = true;
|
263
|
-
this.timestamp = +new Date();
|
264
|
-
},
|
265
|
-
touchStartEvent(e) {
|
266
|
-
if (this.success) return;
|
267
|
-
this.originX = e.changedTouches[0].pageX;
|
268
|
-
this.originY = e.changedTouches[0].pageY;
|
269
|
-
this.isMouseDown = true;
|
270
|
-
this.timestamp = +new Date();
|
271
|
-
},
|
272
|
-
bindEvents() {
|
273
|
-
document.addEventListener("mousemove", this.handleMoveEvent);
|
274
|
-
document.addEventListener("mouseup", this.handleMoveEndEvent);
|
275
|
-
},
|
276
|
-
// 处理函数抽离
|
277
|
-
handleMoveEvent: throttle(function (e, type = "mouse") {
|
278
|
-
if (!this.isMouseDown) return false;
|
279
|
-
const moveX = type === "mouse" ? e.clientX - this.originX : e.changedTouches[0].pageX - this.originX;
|
280
|
-
const moveY = type === "mouse" ? e.clientY - this.originY : e.changedTouches[0].pageY - this.originY;
|
281
|
-
if (moveX < 0 || moveX + 38 >= this.w) return false;
|
282
|
-
this.sliderLeft = moveX + "px";
|
283
|
-
let blockLeft = (this.w - 40 - 20) / (this.w - 40) * moveX;
|
284
|
-
this.block.style.left = blockLeft + "px";
|
285
|
-
this.containerActive = true; // add active
|
286
|
-
this.sliderMaskWidth = moveX + "px";
|
287
|
-
this.trail.push(moveY);
|
288
|
-
}),
|
289
|
-
handleMoveEndEvent(e, type = "mouse") {
|
290
|
-
if (!this.isMouseDown) return false;
|
291
|
-
this.isMouseDown = false;
|
292
|
-
if (type === "mouse" && e.clientX === this.originX || type === "touch" && e.changedTouches[0].pageX === this.originX) return false;
|
293
|
-
this.containerActive = false; // remove active
|
294
|
-
this.timestamp = +new Date() - this.timestamp;
|
295
|
-
const {
|
296
|
-
spliced,
|
297
|
-
TuringTest
|
298
|
-
} = this.verify();
|
299
|
-
if (spliced) {
|
300
|
-
if (this.accuracy === -1) {
|
301
|
-
this.containerSuccess = true;
|
302
|
-
this.success = true;
|
303
|
-
this.$emit("success", this.timestamp);
|
304
|
-
return;
|
305
|
-
}
|
306
|
-
if (TuringTest) {
|
307
|
-
// succ
|
308
|
-
this.containerSuccess = true;
|
309
|
-
this.success = true;
|
310
|
-
this.$emit("success", this.timestamp);
|
311
|
-
} else {
|
312
|
-
this.containerFail = true;
|
313
|
-
this.$emit("again");
|
314
|
-
}
|
315
|
-
} else {
|
316
|
-
this.containerFail = true;
|
317
|
-
this.$emit("fail");
|
318
|
-
setTimeout(() => {
|
319
|
-
this.reset();
|
320
|
-
}, 1000);
|
321
|
-
}
|
322
|
-
},
|
323
|
-
verify() {
|
324
|
-
const arr = this.trail; // drag y move distance
|
325
|
-
const average = arr.reduce(sum) / arr.length; // average
|
326
|
-
const deviations = arr.map(x => x - average); // deviation array
|
327
|
-
const stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length); // standard deviation
|
328
|
-
const left = parseInt(this.block.style.left);
|
329
|
-
const accuracy = this.accuracy <= 1 ? 1 : this.accuracy > 10 ? 10 : this.accuracy;
|
330
|
-
return {
|
331
|
-
spliced: Math.abs(left - this.block_x) <= accuracy,
|
332
|
-
TuringTest: average !== stddev // equal => not person operate
|
333
|
-
};
|
334
|
-
},
|
335
|
-
|
336
|
-
reset() {
|
337
|
-
this.success = false;
|
338
|
-
this.containerActive = false;
|
339
|
-
this.containerSuccess = false;
|
340
|
-
this.containerFail = false;
|
341
|
-
this.sliderLeft = 0;
|
342
|
-
this.block.style.left = 0;
|
343
|
-
this.sliderMaskWidth = 0;
|
344
|
-
// canvas
|
345
|
-
let {
|
346
|
-
w,
|
347
|
-
h
|
348
|
-
} = this;
|
349
|
-
this.canvasCtx.clearRect(0, 0, w, h);
|
350
|
-
this.blockCtx.clearRect(0, 0, w, h);
|
351
|
-
this.block.width = w;
|
352
|
-
|
353
|
-
// generate img
|
354
|
-
this.img.src = this.getRandomImg();
|
355
|
-
this.$emit("fulfilled");
|
356
|
-
}
|
357
|
-
},
|
358
|
-
destroyed() {
|
359
|
-
document.removeEventListener("mousemove", this.handleMoveEvent);
|
360
|
-
document.removeEventListener("mouseup", this.handleMoveEndEvent);
|
361
|
-
}
|
362
|
-
});
|
363
|
-
function throttle(fn, interval = 50, options = {
|
364
|
-
leading: true,
|
365
|
-
trailing: true
|
366
|
-
}) {
|
367
|
-
const {
|
368
|
-
leading,
|
369
|
-
trailing,
|
370
|
-
resultCallback
|
371
|
-
} = options;
|
372
|
-
let lastTime = 0;
|
373
|
-
let timer = null;
|
374
|
-
const _throttle = function (...args) {
|
375
|
-
return new Promise((resolve, reject) => {
|
376
|
-
const nowTime = new Date().getTime();
|
377
|
-
if (!lastTime && !leading) lastTime = nowTime;
|
378
|
-
const remainTime = interval - (nowTime - lastTime);
|
379
|
-
if (remainTime <= 0) {
|
380
|
-
if (timer) {
|
381
|
-
clearTimeout(timer);
|
382
|
-
timer = null;
|
383
|
-
}
|
384
|
-
const result = fn.apply(this, args);
|
385
|
-
if (resultCallback) resultCallback(result);
|
386
|
-
resolve(result);
|
387
|
-
lastTime = nowTime;
|
388
|
-
return;
|
389
|
-
}
|
390
|
-
if (trailing && !timer) {
|
391
|
-
timer = setTimeout(() => {
|
392
|
-
timer = null;
|
393
|
-
lastTime = !leading ? 0 : new Date().getTime();
|
394
|
-
const result = fn.apply(this, args);
|
395
|
-
if (resultCallback) resultCallback(result);
|
396
|
-
resolve(result);
|
397
|
-
}, remainTime);
|
398
|
-
}
|
399
|
-
});
|
400
|
-
};
|
401
|
-
_throttle.cancel = function () {
|
402
|
-
if (timer) clearTimeout(timer);
|
403
|
-
timer = null;
|
404
|
-
lastTime = 0;
|
405
|
-
};
|
406
|
-
return _throttle;
|
407
|
-
}
|
408
|
-
;// CONCATENATED MODULE: ./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue?vue&type=script&lang=js&
|
409
|
-
/* harmony default export */ var lib_slide_verifyvue_type_script_lang_js_ = (slide_verifyvue_type_script_lang_js_);
|
410
|
-
;// 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&
|
411
|
-
// extracted by mini-css-extract-plugin
|
412
|
-
|
413
|
-
;// 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&
|
414
|
-
|
415
|
-
// EXTERNAL MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
|
416
|
-
var componentNormalizer = __webpack_require__(1001);
|
417
|
-
;// CONCATENATED MODULE: ./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue
|
418
|
-
|
419
|
-
|
420
|
-
|
421
|
-
;
|
422
|
-
|
423
|
-
|
424
|
-
/* normalize component */
|
425
|
-
|
426
|
-
var component = (0,componentNormalizer/* default */.Z)(
|
427
|
-
lib_slide_verifyvue_type_script_lang_js_,
|
428
|
-
render,
|
429
|
-
staticRenderFns,
|
430
|
-
false,
|
431
|
-
null,
|
432
|
-
"b67196d8",
|
433
|
-
null
|
434
|
-
|
435
|
-
)
|
436
|
-
|
437
|
-
/* harmony default export */ var slide_verify = (component.exports);
|
438
|
-
|
439
|
-
/***/ })
|
440
|
-
|
441
|
-
}]);
|
442
|
-
//# sourceMappingURL=yc-ui2.umd.774.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"yc-ui2.umd.774.js","mappings":";;;;;;;;;;;;;;;AAAA,IAAIA,MAAM,GAAG,SAASA,MAAMA,CAAA,EAAE;EAAC,IAAIC,GAAG,GAAC,IAAI;IAACC,EAAE,GAACD,GAAG,CAACE,KAAK,CAACD,EAAE;EAAC,OAAOA,EAAE,CAAC,KAAK,EAAC;IAACE,WAAW,EAAC,cAAc;IAACC,KAAK,EAAE;MAAEC,KAAK,EAAEL,GAAG,CAACM,CAAC,GAAG;IAAK,CAAE;IAACC,KAAK,EAAC;MAAC,IAAI,EAAC,aAAa;MAAC,eAAe,EAAC;IAAe;EAAC,CAAC,EAAC,CAACN,EAAE,CAAC,KAAK,EAAC;IAACO,KAAK,EAAC;MAAE,uBAAuB,EAAER,GAAG,CAACS;IAAU;EAAC,CAAC,CAAC,EAACR,EAAE,CAAC,QAAQ,EAAC;IAACS,GAAG,EAAC,QAAQ;IAACH,KAAK,EAAC;MAAC,OAAO,EAACP,GAAG,CAACM,CAAC;MAAC,QAAQ,EAACN,GAAG,CAACW;IAAC;EAAC,CAAC,CAAC,EAAEX,GAAG,CAACY,IAAI,GAAEX,EAAE,CAAC,KAAK,EAAC;IAACE,WAAW,EAAC,2BAA2B;IAACU,EAAE,EAAC;MAAC,OAAO,EAACb,GAAG,CAACc;IAAO;EAAC,CAAC,CAAC,GAACd,GAAG,CAACe,EAAE,CAAC,CAAC,EAACd,EAAE,CAAC,QAAQ,EAAC;IAACS,GAAG,EAAC,OAAO;IAACP,WAAW,EAAC,oBAAoB;IAACI,KAAK,EAAC;MAAC,OAAO,EAACP,GAAG,CAACM,CAAC;MAAC,QAAQ,EAACN,GAAG,CAACW;IAAC;EAAC,CAAC,CAAC,EAACV,EAAE,CAAC,KAAK,EAAC;IAACE,WAAW,EAAC,qBAAqB;IAACK,KAAK,EAAC;MACjjB,kBAAkB,EAAER,GAAG,CAACgB,eAAe;MACvC,mBAAmB,EAAEhB,GAAG,CAACiB,gBAAgB;MACzC,gBAAgB,EAAEjB,GAAG,CAACkB;IACxB;EAAC,CAAC,EAAC,CAACjB,EAAE,CAAC,KAAK,EAAC;IAACE,WAAW,EAAC,0BAA0B;IAACC,KAAK,EAAE;MAAEC,KAAK,EAAEL,GAAG,CAACmB;IAAgB;EAAE,CAAC,EAAC,CAAClB,EAAE,CAAC,KAAK,EAAC;IAACE,WAAW,EAAC,+BAA+B;IAACC,KAAK,EAAE;MAAEgB,IAAI,EAAEpB,GAAG,CAACqB;IAAW,CAAE;IAACR,EAAE,EAAC;MAAC,WAAW,EAACb,GAAG,CAACsB,UAAU;MAAC,YAAY,EAACtB,GAAG,CAACuB,eAAe;MAAC,WAAW,EAAC,SAAAC,CAASC,MAAM,EAAC;QAAC,OAAOzB,GAAG,CAAC0B,eAAe,CAACD,MAAM,EAAE,OAAO,CAAC;MAAA,CAAC;MAAC,UAAU,EAAC,SAAAE,CAASF,MAAM,EAAC;QAAC,OAAOzB,GAAG,CAAC4B,kBAAkB,CAACH,MAAM,EAAE,OAAO,CAAC;MAAA;IAAC;EAAC,CAAC,EAAC,CAACxB,EAAE,CAAC,KAAK,EAAC;IAACE,WAAW,EAAC;EAAoC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAACF,EAAE,CAAC,MAAM,EAAC;IAACE,WAAW,EAAC;EAA0B,CAAC,EAAC,CAACH,GAAG,CAAC6B,EAAE,CAAC7B,GAAG,CAAC8B,EAAE,CAAC9B,GAAG,CAAC+B,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC3iB,CAAC;AACD,IAAIC,eAAe,GAAG,EAAE;;;;;;ACsCxB,MAAAC,EAAA,GAAAC,IAAA,CAAAD,EAAA;AAEA,SAAAE,IAAAC,CAAA,EAAAC,CAAA;EACA,OAAAD,CAAA,GAAAC,CAAA;AACA;AAEA,SAAAC,OAAAF,CAAA;EACA,OAAAA,CAAA,GAAAA,CAAA;AACA;AACA,yEAAe;EACfG,IAAA;EACAC,KAAA;IACA;IACAC,CAAA;MACAC,IAAA,EAAAC,MAAA;MACAC,OAAA;IACA;IACA;IACAC,CAAA;MACAH,IAAA,EAAAC,MAAA;MACAC,OAAA;IACA;IACA;IACAtC,CAAA;MACAoC,IAAA,EAAAC,MAAA;MACAC,OAAA;IACA;IACA;IACAjC,CAAA;MACA+B,IAAA,EAAAC,MAAA;MACAC,OAAA;IACA;IACAb,UAAA;MACAW,IAAA,EAAAI,MAAA;MACAF,OAAA;IACA;IACAG,QAAA;MACAL,IAAA,EAAAC,MAAA;MACAC,OAAA;IACA;;IACAhC,IAAA;MACA8B,IAAA,EAAAM,OAAA;MACAJ,OAAA;IACA;IACAK,IAAA;MACAP,IAAA,EAAAQ,KAAA;MACAN,OAAA,EAAAA,CAAA;IACA;EACA;EACAO,KAAA;IACA;MACAnC,eAAA;MAAA;MACAC,gBAAA;MAAA;MACAC,aAAA;MAAA;MACAkC,SAAA;MACAC,QAAA;MACAC,KAAA;MACAC,OAAA,EAAAC,SAAA;MAAA;MACAC,OAAA,EAAAD,SAAA;MACAE,CAAA,OAAAjB,CAAA,QAAAI,CAAA;MAAA;MACAc,GAAA,EAAAH,SAAA;MACAI,OAAA,EAAAJ,SAAA;MACAK,OAAA,EAAAL,SAAA;MACAM,WAAA;MACAC,KAAA;MACA1C,UAAA;MAAA;MACAF,eAAA;MAAA;MACA6C,OAAA;MAAA;MACAvD,SAAA;MAAA;MACAwD,SAAA;IACA;EACA;EACAC,QAAA;IACA,KAAAC,IAAA;EACA;EACAC,OAAA;IACAD,KAAA;MACA,KAAAE,OAAA;MACA,KAAAC,OAAA;MACA,KAAAC,UAAA;IACA;IACAF,QAAA;MACA,KAAAf,KAAA,QAAAkB,KAAA,CAAAlB,KAAA;MACA,KAAAF,SAAA,QAAAoB,KAAA,CAAAC,MAAA,CAAAC,UAAA;MACA,KAAArB,QAAA,QAAAC,KAAA,CAAAoB,UAAA;IACA;IACAJ,QAAA;MACA,MAAAX,GAAA,QAAAgB,SAAA;QACA;QACA,KAAAlE,SAAA;QACA,KAAAmE,SAAA;QACA,KAAAxB,SAAA,CAAAyB,SAAA,CAAAlB,GAAA,aAAArD,CAAA,OAAAK,CAAA;QACA,KAAA0C,QAAA,CAAAwB,SAAA,CAAAlB,GAAA,aAAArD,CAAA,OAAAK,CAAA;QACA;UAAA4C,OAAA,EAAAnB,CAAA;UAAAqB,OAAA,EAAApB,CAAA;UAAAQ,CAAA;UAAAa;QAAA;QACA,IAAAoB,EAAA,GAAAzC,CAAA,GAAAQ,CAAA;QACA,IAAAkC,SAAA,QAAA1B,QAAA,CAAA2B,YAAA,CAAA5C,CAAA,EAAA0C,EAAA,EAAApB,CAAA,EAAAA,CAAA;QACA,KAAAJ,KAAA,CAAAjD,KAAA,GAAAqD,CAAA;QACA,KAAAL,QAAA,CAAA4B,YAAA,CAAAF,SAAA,KAAAD,EAAA;MACA;MACA,KAAAnB,GAAA,GAAAA,GAAA;IACA;IACAiB,UAAA;MACA,KAAArB,OAAA,QAAA2B,sBAAA,CACA,KAAAxB,CAAA,OACA,KAAApD,CAAA,SAAAoD,CAAA,MACA;MACA,KAAAD,OAAA,QAAAyB,sBAAA,CACA,UAAArC,CAAA,MACA,KAAAlC,CAAA,SAAA+C,CAAA,MACA;MACA,KAAAyB,IAAA,MAAA/B,SAAA,OAAAG,OAAA,OAAAE,OAAA;MACA,KAAA0B,IAAA,MAAA9B,QAAA,OAAAE,OAAA,OAAAE,OAAA;IACA;IACA0B,KAAAC,GAAA,EAAAhD,CAAA,EAAAC,CAAA,EAAAgD,SAAA;MACA;QAAA5C,CAAA;QAAAI;MAAA;MACAuC,GAAA,CAAAE,SAAA;MACAF,GAAA,CAAAG,MAAA,CAAAnD,CAAA,EAAAC,CAAA;MACA+C,GAAA,CAAAI,GAAA,CAAApD,CAAA,GAAAK,CAAA,MAAAJ,CAAA,GAAAQ,CAAA,MAAAA,CAAA,SAAAZ,EAAA,SAAAA,EAAA;MACAmD,GAAA,CAAAK,MAAA,CAAArD,CAAA,GAAAK,CAAA,EAAAJ,CAAA;MACA+C,GAAA,CAAAI,GAAA,CAAApD,CAAA,GAAAK,CAAA,GAAAI,CAAA,MAAAR,CAAA,GAAAI,CAAA,MAAAI,CAAA,SAAAZ,EAAA,SAAAA,EAAA;MACAmD,GAAA,CAAAK,MAAA,CAAArD,CAAA,GAAAK,CAAA,EAAAJ,CAAA,GAAAI,CAAA;MACA2C,GAAA,CAAAK,MAAA,CAAArD,CAAA,EAAAC,CAAA,GAAAI,CAAA;MACA2C,GAAA,CAAAI,GAAA,CAAApD,CAAA,GAAAS,CAAA,MAAAR,CAAA,GAAAI,CAAA,MAAAI,CAAA,eAAAZ,EAAA,SAAAA,EAAA;MACAmD,GAAA,CAAAK,MAAA,CAAArD,CAAA,EAAAC,CAAA;MACA+C,GAAA,CAAAM,SAAA;MACAN,GAAA,CAAAO,SAAA;MACAP,GAAA,CAAAQ,WAAA;MACAR,GAAA,CAAAS,MAAA;MACAT,GAAA,CAAAC,SAAA;MACA;MACAD,GAAA,CAAAU,wBAAA;IACA;IACAnB,UAAAoB,MAAA;MACA,MAAApC,GAAA,GAAAqC,QAAA,CAAAC,aAAA;MACAtC,GAAA,CAAAuC,WAAA;MACAvC,GAAA,CAAAoC,MAAA,GAAAA,MAAA;MACApC,GAAA,CAAAwC,OAAA;QACAxC,GAAA,CAAAyC,GAAA,QAAAC,YAAA;MACA;MACA1C,GAAA,CAAAyC,GAAA,QAAAC,YAAA;MACA,OAAA1C,GAAA;IACA;IACA;IACA0C,aAAA;MACA;MACA,MAAAC,GAAA,QAAArD,IAAA,CAAAsD,MAAA;MACA,OAAAD,GAAA,OACA,KAAArD,IAAA,MAAAiC,sBAAA,IAAAoB,GAAA;MACA;MACA;MACA;IACA;;IACApB,uBAAAsB,KAAA,EAAAC,GAAA;MACA,OAAAvE,IAAA,CAAAwE,KAAA,CAAAxE,IAAA,CAAAyE,MAAA,MAAAF,GAAA,GAAAD,KAAA,IAAAA,KAAA;IACA;IACA1F,QAAA;MACA,KAAA8F,KAAA;MACA,KAAAC,KAAA;IACA;IACAvF,WAAAwF,KAAA;MACA,SAAA9C,OAAA;MACA,KAAAJ,OAAA,GAAAkD,KAAA,CAAAC,OAAA;MACA,KAAAlD,OAAA,GAAAiD,KAAA,CAAAE,OAAA;MACA,KAAAlD,WAAA;MACA,KAAAG,SAAA,QAAAgD,IAAA;IACA;IACA1F,gBAAA2F,CAAA;MACA,SAAAlD,OAAA;MACA,KAAAJ,OAAA,GAAAsD,CAAA,CAAAC,cAAA,IAAAC,KAAA;MACA,KAAAvD,OAAA,GAAAqD,CAAA,CAAAC,cAAA,IAAAE,KAAA;MACA,KAAAvD,WAAA;MACA,KAAAG,SAAA,QAAAgD,IAAA;IACA;IACA1C,WAAA;MACAyB,QAAA,CAAAsB,gBAAA,mBAAA5F,eAAA;MACAsE,QAAA,CAAAsB,gBAAA,iBAAA1F,kBAAA;IACA;IACA;IACAF,eAAA,EAAA6F,QAAA,WAAAL,CAAA,EAAAxE,IAAA;MACA,UAAAoB,WAAA;MACA,MAAA0D,KAAA,GACA9E,IAAA,eACAwE,CAAA,CAAAH,OAAA,QAAAnD,OAAA,GACAsD,CAAA,CAAAC,cAAA,IAAAC,KAAA,QAAAxD,OAAA;MACA,MAAA6D,KAAA,GACA/E,IAAA,eACAwE,CAAA,CAAAF,OAAA,QAAAnD,OAAA,GACAqD,CAAA,CAAAC,cAAA,IAAAE,KAAA,QAAAxD,OAAA;MACA,IAAA2D,KAAA,QAAAA,KAAA,cAAAlH,CAAA;MACA,KAAAe,UAAA,GAAAmG,KAAA;MACA,IAAAE,SAAA,SAAApH,CAAA,oBAAAA,CAAA,SAAAkH,KAAA;MACA,KAAAlE,KAAA,CAAAlD,KAAA,CAAAgB,IAAA,GAAAsG,SAAA;MAEA,KAAA1G,eAAA;MACA,KAAAG,eAAA,GAAAqG,KAAA;MACA,KAAAzD,KAAA,CAAA4D,IAAA,CAAAF,KAAA;IACA;IACA7F,mBAAAsF,CAAA,EAAAxE,IAAA;MACA,UAAAoB,WAAA;MACA,KAAAA,WAAA;MACA,IACApB,IAAA,gBAAAwE,CAAA,CAAAH,OAAA,UAAAnD,OAAA,IACAlB,IAAA,gBAAAwE,CAAA,CAAAC,cAAA,IAAAC,KAAA,UAAAxD,OAAA,EAEA;MACA,KAAA5C,eAAA;MACA,KAAAiD,SAAA,QAAAgD,IAAA,UAAAhD,SAAA;MAEA;QAAA2D,OAAA;QAAAC;MAAA,SAAAC,MAAA;MACA,IAAAF,OAAA;QACA,SAAA7E,QAAA;UACA,KAAA9B,gBAAA;UACA,KAAA+C,OAAA;UACA,KAAA6C,KAAA,iBAAA5C,SAAA;UACA;QACA;QACA,IAAA4D,UAAA;UACA;UACA,KAAA5G,gBAAA;UACA,KAAA+C,OAAA;UACA,KAAA6C,KAAA,iBAAA5C,SAAA;QACA;UACA,KAAA/C,aAAA;UACA,KAAA2F,KAAA;QACA;MACA;QACA,KAAA3F,aAAA;QACA,KAAA2F,KAAA;QACAkB,UAAA;UACA,KAAAnB,KAAA;QACA;MACA;IACA;IACAkB,OAAA;MACA,MAAAE,GAAA,QAAAjE,KAAA;MACA,MAAAkE,OAAA,GAAAD,GAAA,CAAAE,MAAA,CAAA/F,GAAA,IAAA6F,GAAA,CAAAzB,MAAA;MACA,MAAA4B,UAAA,GAAAH,GAAA,CAAAI,GAAA,CAAAhG,CAAA,IAAAA,CAAA,GAAA6F,OAAA;MACA,MAAAI,MAAA,GAAAnG,IAAA,CAAAoG,IAAA,CAAAH,UAAA,CAAAC,GAAA,CAAA9F,MAAA,EAAA4F,MAAA,CAAA/F,GAAA,IAAA6F,GAAA,CAAAzB,MAAA;MACA,MAAAnF,IAAA,GAAAmH,QAAA,MAAAjF,KAAA,CAAAlD,KAAA,CAAAgB,IAAA;MACA,MAAA2B,QAAA,GACA,KAAAA,QAAA,iBAAAA,QAAA,kBAAAA,QAAA;MACA;QACA6E,OAAA,EAAA1F,IAAA,CAAAsG,GAAA,CAAApH,IAAA,QAAAmC,OAAA,KAAAR,QAAA;QACA8E,UAAA,EAAAI,OAAA,KAAAI,MAAA;MACA;IACA;;IACAzB,MAAA;MACA,KAAA5C,OAAA;MACA,KAAAhD,eAAA;MACA,KAAAC,gBAAA;MACA,KAAAC,aAAA;MACA,KAAAG,UAAA;MACA,KAAAiC,KAAA,CAAAlD,KAAA,CAAAgB,IAAA;MACA,KAAAD,eAAA;MACA;MACA;QAAAb,CAAA;QAAAK;MAAA;MACA,KAAAyC,SAAA,CAAAqF,SAAA,OAAAnI,CAAA,EAAAK,CAAA;MACA,KAAA0C,QAAA,CAAAoF,SAAA,OAAAnI,CAAA,EAAAK,CAAA;MACA,KAAA2C,KAAA,CAAAjD,KAAA,GAAAC,CAAA;;MAEA;MACA,KAAAqD,GAAA,CAAAyC,GAAA,QAAAC,YAAA;MACA,KAAAQ,KAAA;IACA;EACA;EACA6B,UAAA;IACA1C,QAAA,CAAA2C,mBAAA,mBAAAjH,eAAA;IACAsE,QAAA,CAAA2C,mBAAA,iBAAA/G,kBAAA;EACA;AACA,CAAC,EAAC;AAEF,SAAA2F,SACAqB,EAAA,EACAC,QAAA,OACAC,OAAA;EAAAC,OAAA;EAAAC,QAAA;AAAA,GACA;EACA;IAAAD,OAAA;IAAAC,QAAA;IAAAC;EAAA,IAAAH,OAAA;EACA,IAAAI,QAAA;EACA,IAAAC,KAAA;EAEA,MAAAC,SAAA,YAAAA,CAAA,GAAAC,IAAA;IACA,WAAAC,OAAA,EAAAC,OAAA,EAAAC,MAAA;MACA,MAAAC,OAAA,OAAAxC,IAAA,GAAAyC,OAAA;MACA,KAAAR,QAAA,KAAAH,OAAA,EAAAG,QAAA,GAAAO,OAAA;MAEA,MAAAE,UAAA,GAAAd,QAAA,IAAAY,OAAA,GAAAP,QAAA;MACA,IAAAS,UAAA;QACA,IAAAR,KAAA;UACAS,YAAA,CAAAT,KAAA;UACAA,KAAA;QACA;QAEA,MAAAU,MAAA,GAAAjB,EAAA,CAAAkB,KAAA,OAAAT,IAAA;QACA,IAAAJ,cAAA,EAAAA,cAAA,CAAAY,MAAA;QACAN,OAAA,CAAAM,MAAA;QACAX,QAAA,GAAAO,OAAA;QACA;MACA;MAEA,IAAAT,QAAA,KAAAG,KAAA;QACAA,KAAA,GAAApB,UAAA;UACAoB,KAAA;UACAD,QAAA,IAAAH,OAAA,WAAA9B,IAAA,GAAAyC,OAAA;UACA,MAAAG,MAAA,GAAAjB,EAAA,CAAAkB,KAAA,OAAAT,IAAA;UACA,IAAAJ,cAAA,EAAAA,cAAA,CAAAY,MAAA;UACAN,OAAA,CAAAM,MAAA;QACA,GAAAF,UAAA;MACA;IACA;EACA;EAEAP,SAAA,CAAAW,MAAA;IACA,IAAAZ,KAAA,EAAAS,YAAA,CAAAT,KAAA;IACAA,KAAA;IACAD,QAAA;EACA;EAEA,OAAAE,SAAA;AACA;;AC1W6N,CAAC,6EAAe,oCAAG,EAAC;;ACAjP;;;;;;;AEAuG;AACvC;AACL;AAC3D,CAAqG;;;AAGrG;AACyF;AACzF,gBAAgB,sCAAU;AAC1B,EAAE,wCAAM;AACR,EAAE,MAAM;AACR,EAAE,eAAe;AACjB;AACA;AACA;AACA;AACA;AACA;;AAEA,iDAAe","sources":["webpack://yc-ui2/./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue","webpack://yc-ui2/node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue","webpack://yc-ui2/./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue?2d70","webpack://yc-ui2/./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue?2bef","webpack://yc-ui2/./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue?ab96","webpack://yc-ui2/./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue?90e5"],"sourcesContent":["var 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:{\n 'container-active': _vm.containerActive,\n 'container-success': _vm.containerSuccess,\n 'container-fail': _vm.containerFail\n }},[_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))])])])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n <div\n class=\"slide-verify\"\n :style=\"{ width: w + 'px' }\"\n id=\"slideVerify\"\n onselectstart=\"return false;\"\n >\n <!-- 图片加载遮蔽罩 -->\n <div :class=\"{ 'slider-verify-loading': loadBlock }\"></div>\n <canvas :width=\"w\" :height=\"h\" ref=\"canvas\"></canvas>\n <div v-if=\"show\" @click=\"refresh\" class=\"slide-verify-refresh-icon\"></div>\n <canvas\n :width=\"w\"\n :height=\"h\"\n ref=\"block\"\n class=\"slide-verify-block\"\n ></canvas>\n <!-- container -->\n <div\n class=\"slide-verify-slider\"\n :class=\"{\n 'container-active': containerActive,\n 'container-success': containerSuccess,\n 'container-fail': containerFail\n }\"\n >\n <div class=\"slide-verify-slider-mask\" :style=\"{ width: sliderMaskWidth }\">\n <!-- slider -->\n <div\n @mousedown=\"sliderDown\"\n @touchstart=\"touchStartEvent\"\n @touchmove=\"handleMoveEvent($event, 'touch')\"\n @touchend=\"handleMoveEndEvent($event, 'touch')\"\n class=\"slide-verify-slider-mask-item\"\n :style=\"{ left: sliderLeft }\"\n >\n <div class=\"slide-verify-slider-mask-item-icon\"></div>\n </div>\n </div>\n <span class=\"slide-verify-slider-text\">{{ sliderText }}</span>\n </div>\n </div>\n</template>\n<script>\nconst PI = Math.PI;\n\nfunction sum(x, y) {\n return x + y;\n}\n\nfunction square(x) {\n return x * x;\n}\nexport default {\n name: \"SlideVerify\",\n props: {\n // block length\n l: {\n type: Number,\n default: 42\n },\n // block radius\n r: {\n type: Number,\n default: 10\n },\n // canvas width\n w: {\n type: Number,\n default: 310\n },\n // canvas height\n h: {\n type: Number,\n default: 155\n },\n sliderText: {\n type: String,\n default: \"Slide filled right\"\n },\n accuracy: {\n type: Number,\n default: 5 // 若为 -1 则不进行机器判断\n },\n show: {\n type: Boolean,\n default: true\n },\n imgs: {\n type: Array,\n default: () => []\n }\n },\n data() {\n return {\n containerActive: false, // container active class\n containerSuccess: false, // container success class\n containerFail: false, // container fail class\n canvasCtx: null,\n blockCtx: null,\n block: null,\n block_x: undefined, // container random position\n block_y: undefined,\n L: this.l + this.r * 2 + 3, // block real length\n img: undefined,\n originX: undefined,\n originY: undefined,\n isMouseDown: false,\n trail: [],\n sliderLeft: 0, // block right offset\n sliderMaskWidth: 0, // mask width,\n success: false, // Bug Fixes 修复了验证成功后还能滑动\n loadBlock: true, // Features 图片加载提示,防止图片没加载完就开始验证\n timestamp: null\n };\n },\n mounted() {\n this.init();\n },\n methods: {\n init() {\n this.initDom();\n this.initImg();\n this.bindEvents();\n },\n initDom() {\n this.block = this.$refs.block;\n this.canvasCtx = this.$refs.canvas.getContext(\"2d\");\n this.blockCtx = this.block.getContext(\"2d\");\n },\n initImg() {\n const img = this.createImg(() => {\n // 图片加载完关闭遮蔽罩\n this.loadBlock = false;\n this.drawBlock();\n this.canvasCtx.drawImage(img, 0, 0, this.w, this.h);\n this.blockCtx.drawImage(img, 0, 0, this.w, this.h);\n let { block_x: x, block_y: y, r, L } = this;\n let _y = y - r * 2 - 1;\n let ImageData = this.blockCtx.getImageData(x, _y, L, L);\n this.block.width = L;\n this.blockCtx.putImageData(ImageData, 0, _y);\n });\n this.img = img;\n },\n drawBlock() {\n this.block_x = this.getRandomNumberByRange(\n this.L + 10,\n this.w - (this.L + 10)\n );\n this.block_y = this.getRandomNumberByRange(\n 10 + this.r * 2,\n this.h - (this.L + 10)\n );\n this.draw(this.canvasCtx, this.block_x, this.block_y, \"fill\");\n this.draw(this.blockCtx, this.block_x, this.block_y, \"clip\");\n },\n draw(ctx, x, y, operation) {\n let { l, r } = this;\n ctx.beginPath();\n ctx.moveTo(x, y);\n ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);\n ctx.lineTo(x + l, y);\n ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI);\n ctx.lineTo(x + l, y + l);\n ctx.lineTo(x, y + l);\n ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true);\n ctx.lineTo(x, y);\n ctx.lineWidth = 2;\n ctx.fillStyle = \"rgba(255, 255, 255, 0.7)\";\n ctx.strokeStyle = \"rgba(255, 255, 255, 0.7)\";\n ctx.stroke();\n ctx[operation]();\n // Bug Fixes 修复了火狐和ie显示问题\n ctx.globalCompositeOperation = \"destination-over\";\n },\n createImg(onload) {\n const img = document.createElement(\"img\");\n img.crossOrigin = \"Anonymous\";\n img.onload = onload;\n img.onerror = () => {\n img.src = this.getRandomImg();\n };\n img.src = this.getRandomImg();\n return img;\n },\n // 随机生成img src\n getRandomImg() {\n // return require('../assets/img.jpg')\n const len = this.imgs.length;\n return len > 0\n ? this.imgs[this.getRandomNumberByRange(0, len - 1)]\n : // \"https://bing.ioliu.cn/v1/rand?w=300&h=150\";\n \"https://source.unsplash.com/300x150/?book,library\";\n // \"https://api.dujin.org/pic/fengjing\";\n },\n getRandomNumberByRange(start, end) {\n return Math.round(Math.random() * (end - start) + start);\n },\n refresh() {\n this.reset();\n this.$emit(\"refresh\");\n },\n sliderDown(event) {\n if (this.success) return;\n this.originX = event.clientX;\n this.originY = event.clientY;\n this.isMouseDown = true;\n this.timestamp = +new Date();\n },\n touchStartEvent(e) {\n if (this.success) return;\n this.originX = e.changedTouches[0].pageX;\n this.originY = e.changedTouches[0].pageY;\n this.isMouseDown = true;\n this.timestamp = +new Date();\n },\n bindEvents() {\n document.addEventListener(\"mousemove\", this.handleMoveEvent);\n document.addEventListener(\"mouseup\", this.handleMoveEndEvent);\n },\n // 处理函数抽离\n handleMoveEvent: throttle(function(e, type = \"mouse\") {\n if (!this.isMouseDown) return false;\n const moveX =\n type === \"mouse\"\n ? e.clientX - this.originX\n : e.changedTouches[0].pageX - this.originX;\n const moveY =\n type === \"mouse\"\n ? e.clientY - this.originY\n : e.changedTouches[0].pageY - this.originY;\n if (moveX < 0 || moveX + 38 >= this.w) return false;\n this.sliderLeft = moveX + \"px\";\n let blockLeft = ((this.w - 40 - 20) / (this.w - 40)) * moveX;\n this.block.style.left = blockLeft + \"px\";\n\n this.containerActive = true; // add active\n this.sliderMaskWidth = moveX + \"px\";\n this.trail.push(moveY);\n }),\n handleMoveEndEvent(e, type = \"mouse\") {\n if (!this.isMouseDown) return false;\n this.isMouseDown = false;\n if (\n (type === \"mouse\" && e.clientX === this.originX) ||\n (type === \"touch\" && e.changedTouches[0].pageX === this.originX)\n )\n return false;\n this.containerActive = false; // remove active\n this.timestamp = +new Date() - this.timestamp;\n\n const { spliced, TuringTest } = this.verify();\n if (spliced) {\n if (this.accuracy === -1) {\n this.containerSuccess = true;\n this.success = true;\n this.$emit(\"success\", this.timestamp);\n return;\n }\n if (TuringTest) {\n // succ\n this.containerSuccess = true;\n this.success = true;\n this.$emit(\"success\", this.timestamp);\n } else {\n this.containerFail = true;\n this.$emit(\"again\");\n }\n } else {\n this.containerFail = true;\n this.$emit(\"fail\");\n setTimeout(() => {\n this.reset();\n }, 1000);\n }\n },\n verify() {\n const arr = this.trail; // drag y move distance\n const average = arr.reduce(sum) / arr.length; // average\n const deviations = arr.map(x => x - average); // deviation array\n const stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length); // standard deviation\n const left = parseInt(this.block.style.left);\n const accuracy =\n this.accuracy <= 1 ? 1 : this.accuracy > 10 ? 10 : this.accuracy;\n return {\n spliced: Math.abs(left - this.block_x) <= accuracy,\n TuringTest: average !== stddev // equal => not person operate\n };\n },\n reset() {\n this.success = false;\n this.containerActive = false;\n this.containerSuccess = false;\n this.containerFail = false;\n this.sliderLeft = 0;\n this.block.style.left = 0;\n this.sliderMaskWidth = 0;\n // canvas\n let { w, h } = this;\n this.canvasCtx.clearRect(0, 0, w, h);\n this.blockCtx.clearRect(0, 0, w, h);\n this.block.width = w;\n\n // generate img\n this.img.src = this.getRandomImg();\n this.$emit(\"fulfilled\");\n }\n },\n destroyed() {\n document.removeEventListener(\"mousemove\", this.handleMoveEvent);\n document.removeEventListener(\"mouseup\", this.handleMoveEndEvent);\n }\n};\n\nfunction throttle(\n fn,\n interval = 50,\n options = { leading: true, trailing: true }\n) {\n const { leading, trailing, resultCallback } = options;\n let lastTime = 0;\n let timer = null;\n\n const _throttle = function(...args) {\n return new Promise((resolve, reject) => {\n const nowTime = new Date().getTime();\n if (!lastTime && !leading) lastTime = nowTime;\n\n const remainTime = interval - (nowTime - lastTime);\n if (remainTime <= 0) {\n if (timer) {\n clearTimeout(timer);\n timer = null;\n }\n\n const result = fn.apply(this, args);\n if (resultCallback) resultCallback(result);\n resolve(result);\n lastTime = nowTime;\n return;\n }\n\n if (trailing && !timer) {\n timer = setTimeout(() => {\n timer = null;\n lastTime = !leading ? 0 : new Date().getTime();\n const result = fn.apply(this, args);\n if (resultCallback) resultCallback(result);\n resolve(result);\n }, remainTime);\n }\n });\n };\n\n _throttle.cancel = function() {\n if (timer) clearTimeout(timer);\n timer = null;\n lastTime = 0;\n };\n\n return _throttle;\n}\n</script>\n<style scoped>\n.slide-verify {\n position: relative;\n}\n\n/* 图片加载样式 */\n.slider-verify-loading {\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.9);\n z-index: 999;\n animation: loading 1.5s infinite;\n}\n\n@keyframes loading {\n 0% {\n opacity: 0.7;\n }\n 100% {\n opacity: 9;\n }\n}\n\n.slide-verify-block {\n position: absolute;\n left: 0;\n top: 0;\n}\n\n.slide-verify-refresh-icon {\n position: absolute;\n right: 0;\n top: 0;\n width: 34px;\n height: 34px;\n cursor: pointer;\n background: url(\"../assets/icon_light.png\") 0 -437px;\n background-size: 34px 471px;\n}\n\n.slide-verify-slider {\n position: relative;\n text-align: center;\n width: 100%;\n height: 40px;\n line-height: 40px;\n margin-top: 15px;\n background: #f7f9fa;\n color: #45494c;\n border: 1px solid #e4e7eb;\n}\n\n.slide-verify-slider-mask {\n position: absolute;\n left: 0;\n top: 0;\n height: 40px;\n border: 0 solid #1991fa;\n background: #d1e9fe;\n}\n\n.slide-verify-slider-mask-item {\n position: absolute;\n top: 0;\n left: 0;\n width: 40px;\n height: 40px;\n background: #fff;\n box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);\n cursor: pointer;\n transition: background 0.2s linear;\n}\n\n.slide-verify-slider-mask-item:hover {\n background: #1991fa;\n}\n\n.slide-verify-slider-mask-item:hover .slide-verify-slider-mask-item-icon {\n background-position: 0 -13px;\n}\n\n.slide-verify-slider-mask-item-icon {\n position: absolute;\n top: 15px;\n left: 13px;\n width: 14px;\n height: 12px;\n background: url(\"../assets/icon_light.png\") 0 -26px;\n background-size: 34px 471px;\n}\n.container-active .slide-verify-slider-mask-item {\n height: 38px;\n top: -1px;\n border: 1px solid #1991fa;\n}\n\n.container-active .slide-verify-slider-mask {\n height: 38px;\n border-width: 1px;\n}\n\n.container-success .slide-verify-slider-mask-item {\n height: 38px;\n top: -1px;\n border: 1px solid #52ccba;\n background-color: #52ccba !important;\n}\n\n.container-success .slide-verify-slider-mask {\n height: 38px;\n border: 1px solid #52ccba;\n background-color: #d2f4ef;\n}\n\n.container-success .slide-verify-slider-mask-item-icon {\n background-position: 0 0 !important;\n}\n\n.container-fail .slide-verify-slider-mask-item {\n height: 38px;\n top: -1px;\n border: 1px solid #f57a7a;\n background-color: #f57a7a !important;\n}\n\n.container-fail .slide-verify-slider-mask {\n height: 38px;\n border: 1px solid #f57a7a;\n background-color: #fce1e1;\n}\n\n.container-fail .slide-verify-slider-mask-item-icon {\n top: 14px;\n background-position: 0 -82px !important;\n}\n\n.container-active .slide-verify-slider-text,\n.container-success .slide-verify-slider-text,\n.container-fail .slide-verify-slider-text {\n display: none;\n}\n</style>\n","import mod from \"-!../../../thread-loader/dist/cjs.js!../../../babel-loader/lib/index.js??clonedRuleSet-82.use[1]!../../../@vue/vue-loader-v15/lib/index.js??vue-loader-options!./slide-verify.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../thread-loader/dist/cjs.js!../../../babel-loader/lib/index.js??clonedRuleSet-82.use[1]!../../../@vue/vue-loader-v15/lib/index.js??vue-loader-options!./slide-verify.vue?vue&type=script&lang=js&\"","// extracted by mini-css-extract-plugin\nexport {};","export * from \"-!../../../mini-css-extract-plugin/dist/loader.js??clonedRuleSet-54.use[0]!../../../css-loader/dist/cjs.js??clonedRuleSet-54.use[1]!../../../@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!../../../postcss-loader/dist/cjs.js??clonedRuleSet-54.use[2]!../../../@vue/vue-loader-v15/lib/index.js??vue-loader-options!./slide-verify.vue?vue&type=style&index=0&id=b67196d8&prod&scoped=true&lang=css&\"","import { render, staticRenderFns } from \"./slide-verify.vue?vue&type=template&id=b67196d8&scoped=true&\"\nimport script from \"./slide-verify.vue?vue&type=script&lang=js&\"\nexport * from \"./slide-verify.vue?vue&type=script&lang=js&\"\nimport style0 from \"./slide-verify.vue?vue&type=style&index=0&id=b67196d8&prod&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../@vue/vue-loader-v15/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"b67196d8\",\n null\n \n)\n\nexport default component.exports"],"names":["render","_vm","_c","_self","staticClass","style","width","w","attrs","class","loadBlock","ref","h","show","on","refresh","_e","containerActive","containerSuccess","containerFail","sliderMaskWidth","left","sliderLeft","sliderDown","touchStartEvent","touchmove","$event","handleMoveEvent","touchend","handleMoveEndEvent","_v","_s","sliderText","staticRenderFns","PI","Math","sum","x","y","square","name","props","l","type","Number","default","r","String","accuracy","Boolean","imgs","Array","data","canvasCtx","blockCtx","block","block_x","undefined","block_y","L","img","originX","originY","isMouseDown","trail","success","timestamp","mounted","init","methods","initDom","initImg","bindEvents","$refs","canvas","getContext","createImg","drawBlock","drawImage","_y","ImageData","getImageData","putImageData","getRandomNumberByRange","draw","ctx","operation","beginPath","moveTo","arc","lineTo","lineWidth","fillStyle","strokeStyle","stroke","globalCompositeOperation","onload","document","createElement","crossOrigin","onerror","src","getRandomImg","len","length","start","end","round","random","reset","$emit","event","clientX","clientY","Date","e","changedTouches","pageX","pageY","addEventListener","throttle","moveX","moveY","blockLeft","push","spliced","TuringTest","verify","setTimeout","arr","average","reduce","deviations","map","stddev","sqrt","parseInt","abs","clearRect","destroyed","removeEventListener","fn","interval","options","leading","trailing","resultCallback","lastTime","timer","_throttle","args","Promise","resolve","reject","nowTime","getTime","remainTime","clearTimeout","result","apply","cancel"],"sourceRoot":""}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
"use strict";(("undefined"!==typeof self?self:this)["webpackChunkyc_ui2"]=("undefined"!==typeof self?self:this)["webpackChunkyc_ui2"]||[]).push([[286],{9286:function(t,e,i){i.r(e),i.d(e,{default:function(){return m}});var s=function(){var t=this,e=t._self._c;return e("div",{staticClass:"slide-verify",style:{width:t.w+"px"},attrs:{id:"slideVerify",onselectstart:"return false;"}},[e("div",{class:{"slider-verify-loading":t.loadBlock}}),e("canvas",{ref:"canvas",attrs:{width:t.w,height:t.h}}),t.show?e("div",{staticClass:"slide-verify-refresh-icon",on:{click:t.refresh}}):t._e(),e("canvas",{ref:"block",staticClass:"slide-verify-block",attrs:{width:t.w,height:t.h}}),e("div",{staticClass:"slide-verify-slider",class:{"container-active":t.containerActive,"container-success":t.containerSuccess,"container-fail":t.containerFail}},[e("div",{staticClass:"slide-verify-slider-mask",style:{width:t.sliderMaskWidth}},[e("div",{staticClass:"slide-verify-slider-mask-item",style:{left:t.sliderLeft},on:{mousedown:t.sliderDown,touchstart:t.touchStartEvent,touchmove:function(e){return t.handleMoveEvent(e,"touch")},touchend:function(e){return t.handleMoveEndEvent(e,"touch")}}},[e("div",{staticClass:"slide-verify-slider-mask-item-icon"})])]),e("span",{staticClass:"slide-verify-slider-text"},[t._v(t._s(t.sliderText))])])])},n=[];i(7658);const o=Math.PI;function a(t,e){return t+e}function r(t){return t*t}var c={name:"SlideVerify",props:{l:{type:Number,default:42},r:{type:Number,default:10},w:{type:Number,default:310},h:{type:Number,default:155},sliderText:{type:String,default:"Slide filled right"},accuracy:{type:Number,default:5},show:{type:Boolean,default:!0},imgs:{type:Array,default:()=>[]}},data(){return{containerActive:!1,containerSuccess:!1,containerFail:!1,canvasCtx:null,blockCtx:null,block:null,block_x:void 0,block_y:void 0,L:this.l+2*this.r+3,img:void 0,originX:void 0,originY:void 0,isMouseDown:!1,trail:[],sliderLeft:0,sliderMaskWidth:0,success:!1,loadBlock:!0,timestamp:null}},mounted(){this.init()},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 t=this.createImg((()=>{this.loadBlock=!1,this.drawBlock(),this.canvasCtx.drawImage(t,0,0,this.w,this.h),this.blockCtx.drawImage(t,0,0,this.w,this.h);let{block_x:e,block_y:i,r:s,L:n}=this,o=i-2*s-1,a=this.blockCtx.getImageData(e,o,n,n);this.block.width=n,this.blockCtx.putImageData(a,0,o)}));this.img=t},drawBlock(){this.block_x=this.getRandomNumberByRange(this.L+10,this.w-(this.L+10)),this.block_y=this.getRandomNumberByRange(10+2*this.r,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(t,e,i,s){let{l:n,r:a}=this;t.beginPath(),t.moveTo(e,i),t.arc(e+n/2,i-a+2,a,.72*o,2.26*o),t.lineTo(e+n,i),t.arc(e+n+a-2,i+n/2,a,1.21*o,2.78*o),t.lineTo(e+n,i+n),t.lineTo(e,i+n),t.arc(e+a-2,i+n/2,a+.4,2.76*o,1.24*o,!0),t.lineTo(e,i),t.lineWidth=2,t.fillStyle="rgba(255, 255, 255, 0.7)",t.strokeStyle="rgba(255, 255, 255, 0.7)",t.stroke(),t[s](),t.globalCompositeOperation="destination-over"},createImg(t){const e=document.createElement("img");return e.crossOrigin="Anonymous",e.onload=t,e.onerror=()=>{e.src=this.getRandomImg()},e.src=this.getRandomImg(),e},getRandomImg(){const t=this.imgs.length;return t>0?this.imgs[this.getRandomNumberByRange(0,t-1)]:"https://source.unsplash.com/300x150/?book,library"},getRandomNumberByRange(t,e){return Math.round(Math.random()*(e-t)+t)},refresh(){this.reset(),this.$emit("refresh")},sliderDown(t){this.success||(this.originX=t.clientX,this.originY=t.clientY,this.isMouseDown=!0,this.timestamp=+new Date)},touchStartEvent(t){this.success||(this.originX=t.changedTouches[0].pageX,this.originY=t.changedTouches[0].pageY,this.isMouseDown=!0,this.timestamp=+new Date)},bindEvents(){document.addEventListener("mousemove",this.handleMoveEvent),document.addEventListener("mouseup",this.handleMoveEndEvent)},handleMoveEvent:l((function(t,e="mouse"){if(!this.isMouseDown)return!1;const i="mouse"===e?t.clientX-this.originX:t.changedTouches[0].pageX-this.originX,s="mouse"===e?t.clientY-this.originY:t.changedTouches[0].pageY-this.originY;if(i<0||i+38>=this.w)return!1;this.sliderLeft=i+"px";let n=(this.w-40-20)/(this.w-40)*i;this.block.style.left=n+"px",this.containerActive=!0,this.sliderMaskWidth=i+"px",this.trail.push(s)})),handleMoveEndEvent(t,e="mouse"){if(!this.isMouseDown)return!1;if(this.isMouseDown=!1,"mouse"===e&&t.clientX===this.originX||"touch"===e&&t.changedTouches[0].pageX===this.originX)return!1;this.containerActive=!1,this.timestamp=+new Date-this.timestamp;const{spliced:i,TuringTest:s}=this.verify();if(i){if(-1===this.accuracy)return this.containerSuccess=!0,this.success=!0,void this.$emit("success",this.timestamp);s?(this.containerSuccess=!0,this.success=!0,this.$emit("success",this.timestamp)):(this.containerFail=!0,this.$emit("again"))}else this.containerFail=!0,this.$emit("fail"),setTimeout((()=>{this.reset()}),1e3)},verify(){const t=this.trail,e=t.reduce(a)/t.length,i=t.map((t=>t-e)),s=Math.sqrt(i.map(r).reduce(a)/t.length),n=parseInt(this.block.style.left),o=this.accuracy<=1?1:this.accuracy>10?10:this.accuracy;return{spliced:Math.abs(n-this.block_x)<=o,TuringTest:e!==s}},reset(){this.success=!1,this.containerActive=!1,this.containerSuccess=!1,this.containerFail=!1,this.sliderLeft=0,this.block.style.left=0,this.sliderMaskWidth=0;let{w:t,h:e}=this;this.canvasCtx.clearRect(0,0,t,e),this.blockCtx.clearRect(0,0,t,e),this.block.width=t,this.img.src=this.getRandomImg(),this.$emit("fulfilled")}},destroyed(){document.removeEventListener("mousemove",this.handleMoveEvent),document.removeEventListener("mouseup",this.handleMoveEndEvent)}};function l(t,e=50,i={leading:!0,trailing:!0}){const{leading:s,trailing:n,resultCallback:o}=i;let a=0,r=null;const c=function(...i){return new Promise(((c,l)=>{const h=(new Date).getTime();a||s||(a=h);const u=e-(h-a);if(u<=0){r&&(clearTimeout(r),r=null);const e=t.apply(this,i);return o&&o(e),c(e),void(a=h)}n&&!r&&(r=setTimeout((()=>{r=null,a=s?(new Date).getTime():0;const e=t.apply(this,i);o&&o(e),c(e)}),u))}))};return c.cancel=function(){r&&clearTimeout(r),r=null,a=0},c}var h=c,u=i(1001),d=(0,u.Z)(h,s,n,!1,null,"b67196d8",null),m=d.exports}}]);
|
2
|
-
//# sourceMappingURL=yc-ui2.umd.min.286.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"yc-ui2.umd.min.286.js","mappings":"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","sources":["webpack://yc-ui2/./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue","webpack://yc-ui2/node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue","webpack://yc-ui2/./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue?bb41","webpack://yc-ui2/./node_modules/vue-monoplasty-slide-verify/src/lib/slide-verify.vue?90e5"],"sourcesContent":["var 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:{\n 'container-active': _vm.containerActive,\n 'container-success': _vm.containerSuccess,\n 'container-fail': _vm.containerFail\n }},[_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))])])])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n <div\n class=\"slide-verify\"\n :style=\"{ width: w + 'px' }\"\n id=\"slideVerify\"\n onselectstart=\"return false;\"\n >\n <!-- 图片加载遮蔽罩 -->\n <div :class=\"{ 'slider-verify-loading': loadBlock }\"></div>\n <canvas :width=\"w\" :height=\"h\" ref=\"canvas\"></canvas>\n <div v-if=\"show\" @click=\"refresh\" class=\"slide-verify-refresh-icon\"></div>\n <canvas\n :width=\"w\"\n :height=\"h\"\n ref=\"block\"\n class=\"slide-verify-block\"\n ></canvas>\n <!-- container -->\n <div\n class=\"slide-verify-slider\"\n :class=\"{\n 'container-active': containerActive,\n 'container-success': containerSuccess,\n 'container-fail': containerFail\n }\"\n >\n <div class=\"slide-verify-slider-mask\" :style=\"{ width: sliderMaskWidth }\">\n <!-- slider -->\n <div\n @mousedown=\"sliderDown\"\n @touchstart=\"touchStartEvent\"\n @touchmove=\"handleMoveEvent($event, 'touch')\"\n @touchend=\"handleMoveEndEvent($event, 'touch')\"\n class=\"slide-verify-slider-mask-item\"\n :style=\"{ left: sliderLeft }\"\n >\n <div class=\"slide-verify-slider-mask-item-icon\"></div>\n </div>\n </div>\n <span class=\"slide-verify-slider-text\">{{ sliderText }}</span>\n </div>\n </div>\n</template>\n<script>\nconst PI = Math.PI;\n\nfunction sum(x, y) {\n return x + y;\n}\n\nfunction square(x) {\n return x * x;\n}\nexport default {\n name: \"SlideVerify\",\n props: {\n // block length\n l: {\n type: Number,\n default: 42\n },\n // block radius\n r: {\n type: Number,\n default: 10\n },\n // canvas width\n w: {\n type: Number,\n default: 310\n },\n // canvas height\n h: {\n type: Number,\n default: 155\n },\n sliderText: {\n type: String,\n default: \"Slide filled right\"\n },\n accuracy: {\n type: Number,\n default: 5 // 若为 -1 则不进行机器判断\n },\n show: {\n type: Boolean,\n default: true\n },\n imgs: {\n type: Array,\n default: () => []\n }\n },\n data() {\n return {\n containerActive: false, // container active class\n containerSuccess: false, // container success class\n containerFail: false, // container fail class\n canvasCtx: null,\n blockCtx: null,\n block: null,\n block_x: undefined, // container random position\n block_y: undefined,\n L: this.l + this.r * 2 + 3, // block real length\n img: undefined,\n originX: undefined,\n originY: undefined,\n isMouseDown: false,\n trail: [],\n sliderLeft: 0, // block right offset\n sliderMaskWidth: 0, // mask width,\n success: false, // Bug Fixes 修复了验证成功后还能滑动\n loadBlock: true, // Features 图片加载提示,防止图片没加载完就开始验证\n timestamp: null\n };\n },\n mounted() {\n this.init();\n },\n methods: {\n init() {\n this.initDom();\n this.initImg();\n this.bindEvents();\n },\n initDom() {\n this.block = this.$refs.block;\n this.canvasCtx = this.$refs.canvas.getContext(\"2d\");\n this.blockCtx = this.block.getContext(\"2d\");\n },\n initImg() {\n const img = this.createImg(() => {\n // 图片加载完关闭遮蔽罩\n this.loadBlock = false;\n this.drawBlock();\n this.canvasCtx.drawImage(img, 0, 0, this.w, this.h);\n this.blockCtx.drawImage(img, 0, 0, this.w, this.h);\n let { block_x: x, block_y: y, r, L } = this;\n let _y = y - r * 2 - 1;\n let ImageData = this.blockCtx.getImageData(x, _y, L, L);\n this.block.width = L;\n this.blockCtx.putImageData(ImageData, 0, _y);\n });\n this.img = img;\n },\n drawBlock() {\n this.block_x = this.getRandomNumberByRange(\n this.L + 10,\n this.w - (this.L + 10)\n );\n this.block_y = this.getRandomNumberByRange(\n 10 + this.r * 2,\n this.h - (this.L + 10)\n );\n this.draw(this.canvasCtx, this.block_x, this.block_y, \"fill\");\n this.draw(this.blockCtx, this.block_x, this.block_y, \"clip\");\n },\n draw(ctx, x, y, operation) {\n let { l, r } = this;\n ctx.beginPath();\n ctx.moveTo(x, y);\n ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);\n ctx.lineTo(x + l, y);\n ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI);\n ctx.lineTo(x + l, y + l);\n ctx.lineTo(x, y + l);\n ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true);\n ctx.lineTo(x, y);\n ctx.lineWidth = 2;\n ctx.fillStyle = \"rgba(255, 255, 255, 0.7)\";\n ctx.strokeStyle = \"rgba(255, 255, 255, 0.7)\";\n ctx.stroke();\n ctx[operation]();\n // Bug Fixes 修复了火狐和ie显示问题\n ctx.globalCompositeOperation = \"destination-over\";\n },\n createImg(onload) {\n const img = document.createElement(\"img\");\n img.crossOrigin = \"Anonymous\";\n img.onload = onload;\n img.onerror = () => {\n img.src = this.getRandomImg();\n };\n img.src = this.getRandomImg();\n return img;\n },\n // 随机生成img src\n getRandomImg() {\n // return require('../assets/img.jpg')\n const len = this.imgs.length;\n return len > 0\n ? this.imgs[this.getRandomNumberByRange(0, len - 1)]\n : // \"https://bing.ioliu.cn/v1/rand?w=300&h=150\";\n \"https://source.unsplash.com/300x150/?book,library\";\n // \"https://api.dujin.org/pic/fengjing\";\n },\n getRandomNumberByRange(start, end) {\n return Math.round(Math.random() * (end - start) + start);\n },\n refresh() {\n this.reset();\n this.$emit(\"refresh\");\n },\n sliderDown(event) {\n if (this.success) return;\n this.originX = event.clientX;\n this.originY = event.clientY;\n this.isMouseDown = true;\n this.timestamp = +new Date();\n },\n touchStartEvent(e) {\n if (this.success) return;\n this.originX = e.changedTouches[0].pageX;\n this.originY = e.changedTouches[0].pageY;\n this.isMouseDown = true;\n this.timestamp = +new Date();\n },\n bindEvents() {\n document.addEventListener(\"mousemove\", this.handleMoveEvent);\n document.addEventListener(\"mouseup\", this.handleMoveEndEvent);\n },\n // 处理函数抽离\n handleMoveEvent: throttle(function(e, type = \"mouse\") {\n if (!this.isMouseDown) return false;\n const moveX =\n type === \"mouse\"\n ? e.clientX - this.originX\n : e.changedTouches[0].pageX - this.originX;\n const moveY =\n type === \"mouse\"\n ? e.clientY - this.originY\n : e.changedTouches[0].pageY - this.originY;\n if (moveX < 0 || moveX + 38 >= this.w) return false;\n this.sliderLeft = moveX + \"px\";\n let blockLeft = ((this.w - 40 - 20) / (this.w - 40)) * moveX;\n this.block.style.left = blockLeft + \"px\";\n\n this.containerActive = true; // add active\n this.sliderMaskWidth = moveX + \"px\";\n this.trail.push(moveY);\n }),\n handleMoveEndEvent(e, type = \"mouse\") {\n if (!this.isMouseDown) return false;\n this.isMouseDown = false;\n if (\n (type === \"mouse\" && e.clientX === this.originX) ||\n (type === \"touch\" && e.changedTouches[0].pageX === this.originX)\n )\n return false;\n this.containerActive = false; // remove active\n this.timestamp = +new Date() - this.timestamp;\n\n const { spliced, TuringTest } = this.verify();\n if (spliced) {\n if (this.accuracy === -1) {\n this.containerSuccess = true;\n this.success = true;\n this.$emit(\"success\", this.timestamp);\n return;\n }\n if (TuringTest) {\n // succ\n this.containerSuccess = true;\n this.success = true;\n this.$emit(\"success\", this.timestamp);\n } else {\n this.containerFail = true;\n this.$emit(\"again\");\n }\n } else {\n this.containerFail = true;\n this.$emit(\"fail\");\n setTimeout(() => {\n this.reset();\n }, 1000);\n }\n },\n verify() {\n const arr = this.trail; // drag y move distance\n const average = arr.reduce(sum) / arr.length; // average\n const deviations = arr.map(x => x - average); // deviation array\n const stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length); // standard deviation\n const left = parseInt(this.block.style.left);\n const accuracy =\n this.accuracy <= 1 ? 1 : this.accuracy > 10 ? 10 : this.accuracy;\n return {\n spliced: Math.abs(left - this.block_x) <= accuracy,\n TuringTest: average !== stddev // equal => not person operate\n };\n },\n reset() {\n this.success = false;\n this.containerActive = false;\n this.containerSuccess = false;\n this.containerFail = false;\n this.sliderLeft = 0;\n this.block.style.left = 0;\n this.sliderMaskWidth = 0;\n // canvas\n let { w, h } = this;\n this.canvasCtx.clearRect(0, 0, w, h);\n this.blockCtx.clearRect(0, 0, w, h);\n this.block.width = w;\n\n // generate img\n this.img.src = this.getRandomImg();\n this.$emit(\"fulfilled\");\n }\n },\n destroyed() {\n document.removeEventListener(\"mousemove\", this.handleMoveEvent);\n document.removeEventListener(\"mouseup\", this.handleMoveEndEvent);\n }\n};\n\nfunction throttle(\n fn,\n interval = 50,\n options = { leading: true, trailing: true }\n) {\n const { leading, trailing, resultCallback } = options;\n let lastTime = 0;\n let timer = null;\n\n const _throttle = function(...args) {\n return new Promise((resolve, reject) => {\n const nowTime = new Date().getTime();\n if (!lastTime && !leading) lastTime = nowTime;\n\n const remainTime = interval - (nowTime - lastTime);\n if (remainTime <= 0) {\n if (timer) {\n clearTimeout(timer);\n timer = null;\n }\n\n const result = fn.apply(this, args);\n if (resultCallback) resultCallback(result);\n resolve(result);\n lastTime = nowTime;\n return;\n }\n\n if (trailing && !timer) {\n timer = setTimeout(() => {\n timer = null;\n lastTime = !leading ? 0 : new Date().getTime();\n const result = fn.apply(this, args);\n if (resultCallback) resultCallback(result);\n resolve(result);\n }, remainTime);\n }\n });\n };\n\n _throttle.cancel = function() {\n if (timer) clearTimeout(timer);\n timer = null;\n lastTime = 0;\n };\n\n return _throttle;\n}\n</script>\n<style scoped>\n.slide-verify {\n position: relative;\n}\n\n/* 图片加载样式 */\n.slider-verify-loading {\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n background: rgba(255, 255, 255, 0.9);\n z-index: 999;\n animation: loading 1.5s infinite;\n}\n\n@keyframes loading {\n 0% {\n opacity: 0.7;\n }\n 100% {\n opacity: 9;\n }\n}\n\n.slide-verify-block {\n position: absolute;\n left: 0;\n top: 0;\n}\n\n.slide-verify-refresh-icon {\n position: absolute;\n right: 0;\n top: 0;\n width: 34px;\n height: 34px;\n cursor: pointer;\n background: url(\"../assets/icon_light.png\") 0 -437px;\n background-size: 34px 471px;\n}\n\n.slide-verify-slider {\n position: relative;\n text-align: center;\n width: 100%;\n height: 40px;\n line-height: 40px;\n margin-top: 15px;\n background: #f7f9fa;\n color: #45494c;\n border: 1px solid #e4e7eb;\n}\n\n.slide-verify-slider-mask {\n position: absolute;\n left: 0;\n top: 0;\n height: 40px;\n border: 0 solid #1991fa;\n background: #d1e9fe;\n}\n\n.slide-verify-slider-mask-item {\n position: absolute;\n top: 0;\n left: 0;\n width: 40px;\n height: 40px;\n background: #fff;\n box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);\n cursor: pointer;\n transition: background 0.2s linear;\n}\n\n.slide-verify-slider-mask-item:hover {\n background: #1991fa;\n}\n\n.slide-verify-slider-mask-item:hover .slide-verify-slider-mask-item-icon {\n background-position: 0 -13px;\n}\n\n.slide-verify-slider-mask-item-icon {\n position: absolute;\n top: 15px;\n left: 13px;\n width: 14px;\n height: 12px;\n background: url(\"../assets/icon_light.png\") 0 -26px;\n background-size: 34px 471px;\n}\n.container-active .slide-verify-slider-mask-item {\n height: 38px;\n top: -1px;\n border: 1px solid #1991fa;\n}\n\n.container-active .slide-verify-slider-mask {\n height: 38px;\n border-width: 1px;\n}\n\n.container-success .slide-verify-slider-mask-item {\n height: 38px;\n top: -1px;\n border: 1px solid #52ccba;\n background-color: #52ccba !important;\n}\n\n.container-success .slide-verify-slider-mask {\n height: 38px;\n border: 1px solid #52ccba;\n background-color: #d2f4ef;\n}\n\n.container-success .slide-verify-slider-mask-item-icon {\n background-position: 0 0 !important;\n}\n\n.container-fail .slide-verify-slider-mask-item {\n height: 38px;\n top: -1px;\n border: 1px solid #f57a7a;\n background-color: #f57a7a !important;\n}\n\n.container-fail .slide-verify-slider-mask {\n height: 38px;\n border: 1px solid #f57a7a;\n background-color: #fce1e1;\n}\n\n.container-fail .slide-verify-slider-mask-item-icon {\n top: 14px;\n background-position: 0 -82px !important;\n}\n\n.container-active .slide-verify-slider-text,\n.container-success .slide-verify-slider-text,\n.container-fail .slide-verify-slider-text {\n display: none;\n}\n</style>\n","import mod from \"-!../../../thread-loader/dist/cjs.js!../../../babel-loader/lib/index.js??clonedRuleSet-124.use[1]!../../../@vue/vue-loader-v15/lib/index.js??vue-loader-options!./slide-verify.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../thread-loader/dist/cjs.js!../../../babel-loader/lib/index.js??clonedRuleSet-124.use[1]!../../../@vue/vue-loader-v15/lib/index.js??vue-loader-options!./slide-verify.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./slide-verify.vue?vue&type=template&id=b67196d8&scoped=true&\"\nimport script from \"./slide-verify.vue?vue&type=script&lang=js&\"\nexport * from \"./slide-verify.vue?vue&type=script&lang=js&\"\nimport style0 from \"./slide-verify.vue?vue&type=style&index=0&id=b67196d8&prod&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../@vue/vue-loader-v15/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"b67196d8\",\n null\n \n)\n\nexport default component.exports"],"names":["render","_vm","this","_c","_self","staticClass","style","width","w","attrs","class","loadBlock","ref","h","show","on","refresh","_e","containerActive","containerSuccess","containerFail","sliderMaskWidth","left","sliderLeft","sliderDown","touchStartEvent","$event","handleMoveEvent","handleMoveEndEvent","_v","_s","sliderText","staticRenderFns","PI","Math","sum","x","y","square","name","props","l","type","Number","default","r","String","accuracy","Boolean","imgs","Array","data","canvasCtx","blockCtx","block","block_x","undefined","block_y","L","img","originX","originY","isMouseDown","trail","success","timestamp","mounted","init","methods","initDom","initImg","bindEvents","$refs","canvas","getContext","createImg","drawBlock","drawImage","_y","ImageData","getImageData","putImageData","getRandomNumberByRange","draw","ctx","operation","beginPath","moveTo","arc","lineTo","lineWidth","fillStyle","strokeStyle","stroke","globalCompositeOperation","onload","document","createElement","crossOrigin","onerror","src","getRandomImg","len","length","start","end","round","random","reset","$emit","event","clientX","clientY","Date","e","changedTouches","pageX","pageY","addEventListener","throttle","moveX","moveY","blockLeft","push","spliced","TuringTest","verify","setTimeout","arr","average","reduce","deviations","map","stddev","sqrt","parseInt","abs","clearRect","destroyed","removeEventListener","fn","interval","options","leading","trailing","resultCallback","lastTime","timer","_throttle","args","Promise","resolve","reject","nowTime","getTime","remainTime","clearTimeout","result","apply","cancel","component"],"sourceRoot":""}
|