Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit dc66cbf

Browse filesBrowse files
javaLuojavaLuo
committed
update
1 parent b20e578 commit dc66cbf
Copy full SHA for dc66cbf

File tree

Expand file treeCollapse file tree

3 files changed

+56
-6079
lines changed
Filter options
Expand file treeCollapse file tree

3 files changed

+56
-6079
lines changed

‎.gitignore

Copy file name to clipboardExpand all lines: .gitignore
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ typings/
5353

5454
# Yarn Integrity file
5555
.yarn-integrity
56-
56+
.lock
5757
# dotenv environment variables file
5858
.env
5959

‎src/app.vue

Copy file name to clipboardExpand all lines: src/app.vue
+55-65Lines changed: 55 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,39 @@
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>
@@ -48,37 +43,32 @@
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">{{ sliderText }}</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

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.