11<template >
22 <!-- 本体部分 -->
3- <div
4- :id =" id"
5- :class =" ['vue-puzzle-vcode', { show_: show }]"
6- @mousedown =" onCloseMouseDown"
7- @mouseup =" onCloseMouseUp"
8- @touchstart =" onCloseMouseDown"
9- @touchend =" onCloseMouseUp"
10- >
11- <div class =" vue-auth-box_" @mousedown.stop @touchstart.stop >
12- <div class =" auth-body_" :style =" `height: ${canvasHeight}px`"
3+ <div :id =" id"
4+ :class =" ['vue-puzzle-vcode', { show_: show }]"
5+ @mousedown =" onCloseMouseDown"
6+ @mouseup =" onCloseMouseUp"
7+ @touchstart =" onCloseMouseDown"
8+ @touchend =" onCloseMouseUp"
9+ <div class =" vue-auth-box_"
10+ @mousedown.stop
11+ @touchstart.stop >
12+ <div class =" auth-body_"
13+ :style =" `height: ${canvasHeight}px`"
1314 <!-- 主图,有缺口 -->
14- <canvas
15- ref =" canvas1"
16- :width =" canvasWidth"
17- :height =" canvasHeight"
18- :style =" `width:${canvasWidth}px;height:${canvasHeight}px`"
19- />
15+ <canvas ref =" canvas1"
16+ :width =" canvasWidth"
17+ :height =" canvasHeight"
18+ :style =" `width:${canvasWidth}px;height:${canvasHeight}px`"
2019 <!-- 成功后显示的完整图 -->
21- <canvas
22- ref =" canvas3"
23- :class =" ['auth-canvas3_', { show: isSuccess }]"
24- :width =" canvasWidth"
25- :height =" canvasHeight"
26- :style =" `width:${canvasWidth}px;height:${canvasHeight}px`"
27- />
20+ <canvas ref =" canvas3"
21+ :class =" ['auth-canvas3_', { show: isSuccess }]"
22+ :width =" canvasWidth"
23+ :height =" canvasHeight"
24+ :style =" `width:${canvasWidth}px;height:${canvasHeight}px`"
2825 <!-- 小图 -->
29- <canvas
30- :width =" puzzleBaseSize"
31- class =" auth-canvas2_"
32- :height =" canvasHeight"
33- ref =" canvas2"
34- :style ="
26+ <canvas :width =" puzzleBaseSize"
27+ class =" auth-canvas2_"
28+ :height =" canvasHeight"
29+ ref =" canvas2"
30+ :style ="
3531 `width:${puzzleBaseSize}px;height:${canvasHeight}px;transform:translateX(${styleWidth -
3632 sliderBaseSize -
3733 (puzzleBaseSize - sliderBaseSize) *
3834 ((styleWidth - sliderBaseSize) /
3935 (canvasWidth - sliderBaseSize))}px)`
40- "
41- />
36+ " />
4237 <div :class =" ['loading-box_', { hide_: !loading }]"
4338 <div class =" loading-gif_"
4439 <span ></span >
4843 <span ></span >
4944 </div >
5045 </div >
51- <div
52- :class =" ['info-box_', { show: infoBoxShow }, { fail: infoBoxFail }]"
53- >
46+ <div :class =" ['info-box_', { show: infoBoxShow }, { fail: infoBoxFail }]"
5447 {{ infoText }}
5548 </div >
56- <div
57- :class =" ['flash_', { show: isSuccess }]"
58- :style ="
49+ <div :class =" ['flash_', { show: isSuccess }]"
50+ :style ="
5951 `transform: translateX(${
6052 isSuccess
6153 ? `${canvasWidth + canvasHeight * 0.578}px`
6254 : `-${canvasHeight * 0.578}px`
6355 }) skew(-30deg, 0);`
64- "
65- ></div >
66- <img class =" reset_" @click =" reset" :src =" resetSvg"
56+ " ></div >
57+ <img class =" reset_"
58+ @click =" reset"
59+ :src =" resetSvg"
6760 </div >
6861 <div class =" auth-control_"
69- <div class =" range-box" :style =" `height:${sliderBaseSize}px`"
62+ <div class =" range-box"
63+ :style =" `height:${sliderBaseSize}px`"
7064 <div class =" range-text" div >
71- <div
72- class =" range-slider"
73- ref =" range-slider"
74- :style =" `width:${styleWidth}px`"
75- >
76- <div
77- :class =" ['range-btn', { isDown: mouseDown }]"
78- :style =" `width:${sliderBaseSize}px`"
79- @mousedown =" onRangeMouseDown($event)"
80- @touchstart =" onRangeMouseDown($event)"
81- >
65+ <div class =" range-slider"
66+ ref =" range-slider"
67+ :style =" `width:${styleWidth}px`"
68+ <div :class =" ['range-btn', { isDown: mouseDown }]"
69+ :style =" `width:${sliderBaseSize}px`"
70+ @mousedown =" onRangeMouseDown($event)"
71+ @touchstart =" onRangeMouseDown($event)"
8272 <div ></div >
8373 <div ></div >
8474 <div ></div >
@@ -111,7 +101,7 @@ export default {
111101 closeDown: false , // 为了解决Mac上的click BUG
112102 isSuccess: false , // 验证成功
113103 resetSvg,
114- imgIndex: - 1 , // 用于自定义图片时不会随机到重复的图片
104+ imgIndex: - 1 // 用于自定义图片时不会随机到重复的图片
115105 };
116106 },
117107 /** 父级参数 **/
@@ -126,20 +116,20 @@ export default {
126116 range: { type: Number , default: 10 }, // 允许的偏差值
127117 // 所有的背景图片
128118 imgs: {
129- type: Array ,
119+ type: Array
130120 },
131121 successText: {
132122 type: String ,
133- default: " 验证通过!" ,
123+ default: " 验证通过!"
134124 },
135125 failText: {
136126 type: String ,
137- default: " 验证失败,请重试" ,
127+ default: " 验证失败,请重试"
138128 },
139129 sliderText: {
140130 type: String ,
141- default: " 拖动滑块完成拼图" ,
142- },
131+ default: " 拖动滑块完成拼图"
132+ }
143133 },
144134
145135 /** 生命周期 **/
@@ -149,7 +139,7 @@ export default {
149139 document .addEventListener (" mouseup" this .onRangeMouseUp , false );
150140
151141 document .addEventListener (" touchmove" this .onRangeMouseMove , {
152- passive: false ,
142+ passive: false
153143 });
154144 document .addEventListener (" touchend" this .onRangeMouseUp , false );
155145 if (this .show ) {
@@ -164,7 +154,7 @@ export default {
164154 document .removeEventListener (" mouseup" this .onRangeMouseUp , false );
165155
166156 document .removeEventListener (" touchmove" this .onRangeMouseMove , {
167- passive: false ,
157+ passive: false
168158 });
169159 document .removeEventListener (" touchend" this .onRangeMouseUp , false );
170160 },
@@ -179,7 +169,7 @@ export default {
179169 } else {
180170 document .body .classList .remove (" vue-puzzle-overflow"
181171 }
182- },
172+ }
183173 },
184174
185175 /** 计算属性 **/
@@ -208,7 +198,7 @@ export default {
208198 ),
209199 10
210200 );
211- },
201+ }
212202 },
213203
214204 /** 方法 **/
@@ -277,7 +267,7 @@ export default {
277267 this .pinY = this .getRandom (
278268 20 ,
279269 this .canvasHeight - this .puzzleBaseSize - 20
280- ); // -60(slider自身高度) - 20(留20边距)
270+ ); // 主图高度 - 拼图块自身高度 - 20边距
281271 img .crossOrigin = " anonymous" // 匿名,想要获取跨域的图片
282272 img .onload = () => {
283273 const [x , y , w , h ] = this .makeImgSize (img);
@@ -586,8 +576,8 @@ export default {
586576 this .startX = 0 ; // 鼠标按下时的X
587577 this .newX = 0 ; // 鼠标当前的偏移X
588578 this .init ();
589- },
590- },
579+ }
580+ }
591581};
592582</script >
593583<style lang="less">
0 commit comments