yuang-framework-ui-pc 1.1.30 → 1.1.31
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.
- package/es/style/default.scss +77 -0
- package/es/style/index.scss +1 -0
- package/es/yu-slider-captcha-dialog/SliderCaptcha.js +35 -20
- package/es/yu-slider-captcha-dialog/index.js +2 -2
- package/es/yu-slider-captcha-dialog/style/index.scss +27 -24
- package/lib/style/default.scss +77 -0
- package/lib/style/index.scss +1 -0
- package/lib/yu-slider-captcha-dialog/SliderCaptcha.cjs +35 -20
- package/lib/yu-slider-captcha-dialog/index.cjs +2 -2
- package/lib/yu-slider-captcha-dialog/style/index.scss +27 -24
- package/package.json +1 -1
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
|
|
2
|
+
.yu-hidden {
|
|
3
|
+
display: none;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.yu-block {
|
|
7
|
+
display: block;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.yu-text-center {
|
|
11
|
+
text-align: center;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.yu-text-left {
|
|
15
|
+
text-align: left;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.yu-text-right {
|
|
19
|
+
text-align: right;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.yu-color-red {
|
|
23
|
+
color: #ff4d4f;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.yu-color-yellow {
|
|
27
|
+
color: #FAAD14;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.yu-color-green {
|
|
31
|
+
color: #33CC99;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
.yu-color-primary {
|
|
36
|
+
color: #409EFF;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.yu-color-info {
|
|
40
|
+
color: #1989fa;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.yu-color-default {
|
|
44
|
+
color: #fff;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.yu-color-danger {
|
|
48
|
+
color: #ee0a24;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.yu-color-warning {
|
|
52
|
+
color: #ff976a;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
.yu-bgc-red {
|
|
57
|
+
background-color: #ff4d4f;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.yu-bgc-yellow {
|
|
61
|
+
background-color: #FAAD14;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.yu-bgc-green {
|
|
65
|
+
background-color: #33CC99;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
.yu-overfow-hidden {
|
|
70
|
+
display: block !important;
|
|
71
|
+
overflow: hidden;
|
|
72
|
+
text-overflow: ellipsis;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.yu-link {
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
}
|
package/es/style/index.scss
CHANGED
|
@@ -24,9 +24,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
24
24
|
const emit = __emit;
|
|
25
25
|
const canvas = ref(null);
|
|
26
26
|
const block = ref(null);
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
const
|
|
27
|
+
const isVerifyActive = ref(false);
|
|
28
|
+
const isVerifySuccess = ref(false);
|
|
29
|
+
const isVerifyFail = ref(false);
|
|
30
30
|
ref(null);
|
|
31
31
|
ref(null);
|
|
32
32
|
ref(props.blockLength * 2);
|
|
@@ -100,7 +100,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
100
100
|
return !!canvas.value.src;
|
|
101
101
|
};
|
|
102
102
|
const startEvent = (clientX, clientY) => {
|
|
103
|
-
if (!checkImgSrc() || isLoading.value ||
|
|
103
|
+
if (!checkImgSrc() || isLoading.value || isVerifySuccess.value) {
|
|
104
104
|
return;
|
|
105
105
|
}
|
|
106
106
|
originX.value = clientX;
|
|
@@ -121,7 +121,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
121
121
|
sliderButtonLeft.value = moveX > props.canvasWidth - 56 ? props.canvasWidth - 56 : moveX;
|
|
122
122
|
let blockLeft = (props.canvasWidth - 40 - 20) / (props.canvasWidth - 40) * moveX;
|
|
123
123
|
block.value.style.left = (blockLeft > props.canvasWidth - 56 - 18 - 7 ? props.canvasWidth - 56 - 18 - 7 : blockLeft) + "px";
|
|
124
|
-
|
|
124
|
+
isVerifyActive.value = true;
|
|
125
125
|
sliderBoxWidth.value = moveX + 28;
|
|
126
126
|
dragDistanceList.value.push(moveY);
|
|
127
127
|
};
|
|
@@ -134,7 +134,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
134
134
|
return false;
|
|
135
135
|
}
|
|
136
136
|
isLoading.value = true;
|
|
137
|
-
|
|
137
|
+
isVerifyActive.value = false;
|
|
138
138
|
timestamp.value = +/* @__PURE__ */ new Date() - timestamp.value;
|
|
139
139
|
const moveLength = parseInt(block.value.style.left);
|
|
140
140
|
if (timestamp.value > 1e4) {
|
|
@@ -148,7 +148,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
148
148
|
captcha: moveLength
|
|
149
149
|
};
|
|
150
150
|
http.get("/sso-api/standard/framework-captcha/validateSliderCaptcha", { params }).then((res) => {
|
|
151
|
-
|
|
151
|
+
verifySuccessEvent();
|
|
152
|
+
setTimeout(() => {
|
|
153
|
+
emit("success", { key: key.value, value: moveLength });
|
|
154
|
+
}, 500);
|
|
152
155
|
}).catch(() => {
|
|
153
156
|
verifyFailEvent();
|
|
154
157
|
});
|
|
@@ -163,18 +166,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
163
166
|
const stdDev = Math.sqrt(deviations.map(calcSquare).reduce(calcSum) / arr.length);
|
|
164
167
|
return average !== stdDev;
|
|
165
168
|
};
|
|
169
|
+
const verifySuccessEvent = () => {
|
|
170
|
+
isLoading.value = false;
|
|
171
|
+
isVerifySuccess.value = true;
|
|
172
|
+
const elapsedTime = (timestamp.value / 1e3).toFixed(1);
|
|
173
|
+
if (elapsedTime < 1) {
|
|
174
|
+
successHint.value = `仅仅${elapsedTime}S，你的速度快如闪电`;
|
|
175
|
+
} else if (elapsedTime < 2) {
|
|
176
|
+
successHint.value = `只用了${elapsedTime}S，这速度简直完美`;
|
|
177
|
+
} else {
|
|
178
|
+
successHint.value = `耗时${elapsedTime}S，争取下次再快一点`;
|
|
179
|
+
}
|
|
180
|
+
};
|
|
166
181
|
const verifyFailEvent = () => {
|
|
167
|
-
|
|
182
|
+
isVerifyFail.value = true;
|
|
168
183
|
emit("fail", {});
|
|
169
184
|
refresh();
|
|
170
185
|
};
|
|
171
186
|
const refresh = () => {
|
|
172
187
|
setTimeout(() => {
|
|
173
|
-
|
|
188
|
+
isVerifyFail.value = false;
|
|
174
189
|
}, 300);
|
|
175
190
|
isLoading.value = true;
|
|
176
|
-
|
|
177
|
-
|
|
191
|
+
isVerifyActive.value = false;
|
|
192
|
+
isVerifySuccess.value = false;
|
|
178
193
|
block.value.style.left = 0;
|
|
179
194
|
sliderBoxWidth.value = 0;
|
|
180
195
|
sliderButtonLeft.value = 0;
|
|
@@ -215,10 +230,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
215
230
|
}, [
|
|
216
231
|
isLoading.value ? (openBlock(), createElementBlock("div", {
|
|
217
232
|
key: 0,
|
|
218
|
-
class: normalizeClass({ "img-loading": isLoading.value }),
|
|
233
|
+
class: normalizeClass({ "yu-slider-captcha-img-loading": isLoading.value }),
|
|
219
234
|
style: normalizeStyle({ height: _ctx.canvasHeight + "px" })
|
|
220
235
|
}, null, 6)) : createCommentVNode("", true),
|
|
221
|
-
|
|
236
|
+
isVerifySuccess.value ? (openBlock(), createElementBlock("div", {
|
|
222
237
|
key: 1,
|
|
223
238
|
class: "success-hint",
|
|
224
239
|
style: normalizeStyle({ height: _ctx.canvasHeight + "px" })
|
|
@@ -226,33 +241,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
226
241
|
createElementVNode("img", {
|
|
227
242
|
ref_key: "canvas",
|
|
228
243
|
ref: canvas,
|
|
229
|
-
class: "
|
|
244
|
+
class: "yu-slider-captcha-canvas",
|
|
230
245
|
width: _ctx.canvasWidth,
|
|
231
246
|
height: _ctx.canvasHeight
|
|
232
247
|
}, null, 8, _hoisted_3),
|
|
233
248
|
createElementVNode("img", {
|
|
234
249
|
ref_key: "block",
|
|
235
250
|
ref: block,
|
|
236
|
-
class: normalizeClass(["yu-
|
|
251
|
+
class: normalizeClass(["yu-slider-captcha-block", { "is-verify-fail": isVerifyFail.value }])
|
|
237
252
|
}, null, 2),
|
|
238
253
|
createElementVNode("div", {
|
|
239
|
-
class: normalizeClass(["slider", { "verify-active":
|
|
254
|
+
class: normalizeClass(["yu-slider-captcha-slider", { "is-verify-active": isVerifyActive.value, "is-verify-success": isVerifySuccess.value, "is-verify-fail": isVerifyFail.value }])
|
|
240
255
|
}, [
|
|
241
256
|
createElementVNode("div", {
|
|
242
|
-
class: "slider-box
|
|
257
|
+
class: "yu-slider-captcha-slider-box",
|
|
243
258
|
style: normalizeStyle({ width: sliderBoxWidth.value + "px" })
|
|
244
259
|
}, [
|
|
245
260
|
createElementVNode("div", {
|
|
246
|
-
class: "yu-slider-button",
|
|
261
|
+
class: "yu-slider-captcha-slider-button",
|
|
247
262
|
id: "slider-button",
|
|
248
263
|
style: normalizeStyle({ left: sliderButtonLeft.value + "px" })
|
|
249
264
|
}, [
|
|
250
265
|
!isSliderSlide.value ? (openBlock(), createBlock(unref(SliderArrowStatic), {
|
|
251
266
|
key: 0,
|
|
252
|
-
class: "yu-slider-button-icon yu-color-primary"
|
|
267
|
+
class: "yu-slider-captcha-slider-button-icon yu-color-primary"
|
|
253
268
|
})) : (openBlock(), createBlock(unref(SliderArrowSlide), {
|
|
254
269
|
key: 1,
|
|
255
|
-
class: "yu-slider-button-icon yu-color-primary"
|
|
270
|
+
class: "yu-slider-captcha-slider-button-icon yu-color-primary"
|
|
256
271
|
}))
|
|
257
272
|
], 4)
|
|
258
273
|
], 4),
|
|
@@ -2,11 +2,11 @@ import { defineComponent, ref, openBlock, createElementBlock, createElementVNode
|
|
|
2
2
|
import SliderCaptcha from "./SliderCaptcha";
|
|
3
3
|
const _hoisted_1 = {
|
|
4
4
|
key: 0,
|
|
5
|
-
class: "yu-slider-captcha-dialog
|
|
5
|
+
class: "yu-slider-captcha-dialog"
|
|
6
6
|
};
|
|
7
7
|
const _hoisted_2 = /* @__PURE__ */ createElementVNode("div", { class: "yu-slider-captcha-dialog-modal" }, null, -1);
|
|
8
8
|
const _hoisted_3 = { class: "yu-slider-captcha-dialog-wrapper" };
|
|
9
|
-
const _hoisted_4 = { class: "yu-slider-captcha-dialog slide-up" };
|
|
9
|
+
const _hoisted_4 = { class: "yu-slider-captcha-dialog yu-slider-captcha-slide-up" };
|
|
10
10
|
const _hoisted_5 = { class: "yu-slider-captcha" };
|
|
11
11
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
12
12
|
...{ name: "YuSliderCaptchaDialog" },
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
|
+
/* 滑块验证码弹出框 */
|
|
3
|
+
.yu-slider-captcha-dialog {
|
|
2
4
|
.yu-slider-captcha-dialog-modal {
|
|
3
5
|
position: fixed;
|
|
4
6
|
left: 0;
|
|
@@ -47,11 +49,11 @@
|
|
|
47
49
|
}
|
|
48
50
|
}
|
|
49
51
|
|
|
50
|
-
.slide-up {
|
|
51
|
-
animation: slide-up-animation 0.5s ease;
|
|
52
|
+
.yu-slider-captcha-slide-up {
|
|
53
|
+
animation: yu-slider-captcha-slide-up-animation 0.5s ease;
|
|
52
54
|
}
|
|
53
55
|
|
|
54
|
-
@keyframes slide-up-animation {
|
|
56
|
+
@keyframes yu-slider-captcha-slide-up-animation {
|
|
55
57
|
0% {
|
|
56
58
|
transform: translate(-50%, 100%);
|
|
57
59
|
}
|
|
@@ -65,6 +67,7 @@
|
|
|
65
67
|
|
|
66
68
|
|
|
67
69
|
|
|
70
|
+
/* 滑块验证码弹容器 */
|
|
68
71
|
.yu-slider-captcha-container {
|
|
69
72
|
.yu-slider-captcha {
|
|
70
73
|
position: relative;
|
|
@@ -112,14 +115,14 @@
|
|
|
112
115
|
}
|
|
113
116
|
|
|
114
117
|
/*图片加载样式*/
|
|
115
|
-
.img-loading {
|
|
118
|
+
.yu-slider-captcha-img-loading {
|
|
116
119
|
position: absolute;
|
|
117
120
|
top: 0;
|
|
118
121
|
right: 0;
|
|
119
122
|
left: 0;
|
|
120
123
|
bottom: 0;
|
|
121
124
|
z-index: 999;
|
|
122
|
-
animation: loading 1.5s infinite;
|
|
125
|
+
animation: yu-slider-captcha-loading 1.5s infinite;
|
|
123
126
|
background-image: url(../images/loading.svg);
|
|
124
127
|
background-repeat: no-repeat;
|
|
125
128
|
background-position: center center;
|
|
@@ -128,7 +131,7 @@
|
|
|
128
131
|
//border-radius: 5px;
|
|
129
132
|
}
|
|
130
133
|
|
|
131
|
-
@keyframes loading {
|
|
134
|
+
@keyframes yu-slider-captcha-loading {
|
|
132
135
|
0% {
|
|
133
136
|
opacity: 0.7;
|
|
134
137
|
}
|
|
@@ -165,12 +168,12 @@
|
|
|
165
168
|
//}
|
|
166
169
|
|
|
167
170
|
/*验证图片*/
|
|
168
|
-
.
|
|
171
|
+
.yu-slider-captcha-canvas {
|
|
169
172
|
//border-radius: 5px;
|
|
170
173
|
}
|
|
171
174
|
|
|
172
175
|
/*阻塞块*/
|
|
173
|
-
.yu-
|
|
176
|
+
.yu-slider-captcha-block {
|
|
174
177
|
position: absolute;
|
|
175
178
|
left: 0;
|
|
176
179
|
top: 0;
|
|
@@ -179,12 +182,12 @@
|
|
|
179
182
|
}
|
|
180
183
|
|
|
181
184
|
/*校验失败时的阻塞块样式*/
|
|
182
|
-
.yu-
|
|
185
|
+
.yu-slider-captcha-block.is-verify-fail {
|
|
183
186
|
transition: left 0.5s linear;
|
|
184
187
|
}
|
|
185
188
|
|
|
186
189
|
/*滑动条*/
|
|
187
|
-
.slider {
|
|
190
|
+
.yu-slider-captcha-slider {
|
|
188
191
|
position: relative;
|
|
189
192
|
text-align: center;
|
|
190
193
|
width: 100%;
|
|
@@ -201,7 +204,7 @@
|
|
|
201
204
|
}
|
|
202
205
|
|
|
203
206
|
/*滑动盒子*/
|
|
204
|
-
.slider-box {
|
|
207
|
+
.yu-slider-captcha-slider-box {
|
|
205
208
|
position: absolute;
|
|
206
209
|
left: 0;
|
|
207
210
|
top: 0;
|
|
@@ -214,7 +217,7 @@
|
|
|
214
217
|
}
|
|
215
218
|
|
|
216
219
|
/*滑动按钮*/
|
|
217
|
-
.yu-slider-button {
|
|
220
|
+
.yu-slider-captcha-slider-button {
|
|
218
221
|
background-color: rgb(255, 255, 255);
|
|
219
222
|
color: white;
|
|
220
223
|
text-align: center;
|
|
@@ -235,17 +238,17 @@
|
|
|
235
238
|
}
|
|
236
239
|
|
|
237
240
|
/*鼠标悬浮时的按钮样式*/
|
|
238
|
-
.yu-slider-button:hover {
|
|
241
|
+
.yu-slider-captcha-slider-button:hover {
|
|
239
242
|
//background: #1991FA
|
|
240
243
|
cursor: pointer;
|
|
241
244
|
}
|
|
242
245
|
|
|
243
246
|
/*鼠标悬浮时的按钮图标样式*/
|
|
244
|
-
.yu-slider-button:hover .yu-slider-button-icon {
|
|
247
|
+
.yu-slider-captcha-slider-button:hover .yu-slider-captcha-slider-button-icon {
|
|
245
248
|
}
|
|
246
249
|
|
|
247
250
|
/*滑动按钮图标*/
|
|
248
|
-
.yu-slider-button-icon {
|
|
251
|
+
.yu-slider-captcha-slider-button-icon {
|
|
249
252
|
width: 32px;
|
|
250
253
|
height: 32px;
|
|
251
254
|
font-size: 24px;
|
|
@@ -254,42 +257,42 @@
|
|
|
254
257
|
}
|
|
255
258
|
|
|
256
259
|
/*校验时的按钮样式*/
|
|
257
|
-
.verify-active .slider-button {
|
|
260
|
+
.is-verify-active .slider-button {
|
|
258
261
|
//height: 38px;
|
|
259
262
|
//top: -1px;
|
|
260
263
|
//border: 1px solid #1991FA;
|
|
261
264
|
}
|
|
262
265
|
|
|
263
266
|
/*校验时的滑动箱样式*/
|
|
264
|
-
.verify-active .slider-box {
|
|
267
|
+
.is-verify-active .yu-slider-captcha-slider-box {
|
|
265
268
|
height: 40px;
|
|
266
269
|
border-width: 1px;
|
|
267
270
|
}
|
|
268
271
|
|
|
269
272
|
/*校验成功时的滑动箱样式*/
|
|
270
|
-
.verify-success .slider-box {
|
|
273
|
+
.is-verify-success .yu-slider-captcha-slider-box {
|
|
271
274
|
height: 40px;
|
|
272
275
|
}
|
|
273
276
|
|
|
274
277
|
/*校验成功时的按钮样式*/
|
|
275
|
-
.verify-success .slider-button {
|
|
278
|
+
.is-verify-success .slider-button {
|
|
276
279
|
}
|
|
277
280
|
|
|
278
281
|
/*校验成功时的按钮图标样式*/
|
|
279
|
-
.verify-success .yu-slider-button-icon {
|
|
282
|
+
.is-verify-success .yu-slider-captcha-slider-button-icon {
|
|
280
283
|
background-position: 0 0 !important;
|
|
281
284
|
}
|
|
282
285
|
|
|
283
286
|
/*校验失败时的滑动箱样式*/
|
|
284
|
-
.verify-fail .slider-box {
|
|
287
|
+
.is-verify-fail .yu-slider-captcha-slider-box {
|
|
285
288
|
transition: width 0.5s linear;
|
|
286
289
|
}
|
|
287
290
|
|
|
288
291
|
/*校验失败时的按钮样式*/
|
|
289
|
-
.verify-fail .slider-button {
|
|
292
|
+
.is-verify-fail .slider-button {
|
|
290
293
|
transition: left 0.5s linear;
|
|
291
294
|
}
|
|
292
295
|
|
|
293
296
|
/*校验失败时的按钮图标样式*/
|
|
294
|
-
.verify-fail .yu-slider-button-icon {
|
|
297
|
+
.is-verify-fail .yu-slider-captcha-slider-button-icon {
|
|
295
298
|
}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
|
|
2
|
+
.yu-hidden {
|
|
3
|
+
display: none;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.yu-block {
|
|
7
|
+
display: block;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.yu-text-center {
|
|
11
|
+
text-align: center;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.yu-text-left {
|
|
15
|
+
text-align: left;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.yu-text-right {
|
|
19
|
+
text-align: right;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.yu-color-red {
|
|
23
|
+
color: #ff4d4f;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.yu-color-yellow {
|
|
27
|
+
color: #FAAD14;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.yu-color-green {
|
|
31
|
+
color: #33CC99;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
.yu-color-primary {
|
|
36
|
+
color: #409EFF;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.yu-color-info {
|
|
40
|
+
color: #1989fa;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.yu-color-default {
|
|
44
|
+
color: #fff;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.yu-color-danger {
|
|
48
|
+
color: #ee0a24;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.yu-color-warning {
|
|
52
|
+
color: #ff976a;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
.yu-bgc-red {
|
|
57
|
+
background-color: #ff4d4f;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.yu-bgc-yellow {
|
|
61
|
+
background-color: #FAAD14;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.yu-bgc-green {
|
|
65
|
+
background-color: #33CC99;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
.yu-overfow-hidden {
|
|
70
|
+
display: block !important;
|
|
71
|
+
overflow: hidden;
|
|
72
|
+
text-overflow: ellipsis;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.yu-link {
|
|
76
|
+
cursor: pointer;
|
|
77
|
+
}
|
package/lib/style/index.scss
CHANGED
|
@@ -25,9 +25,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
25
25
|
const emit = __emit;
|
|
26
26
|
const canvas = vue.ref(null);
|
|
27
27
|
const block = vue.ref(null);
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
const
|
|
28
|
+
const isVerifyActive = vue.ref(false);
|
|
29
|
+
const isVerifySuccess = vue.ref(false);
|
|
30
|
+
const isVerifyFail = vue.ref(false);
|
|
31
31
|
vue.ref(null);
|
|
32
32
|
vue.ref(null);
|
|
33
33
|
vue.ref(props.blockLength * 2);
|
|
@@ -101,7 +101,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
101
101
|
return !!canvas.value.src;
|
|
102
102
|
};
|
|
103
103
|
const startEvent = (clientX, clientY) => {
|
|
104
|
-
if (!checkImgSrc() || isLoading.value ||
|
|
104
|
+
if (!checkImgSrc() || isLoading.value || isVerifySuccess.value) {
|
|
105
105
|
return;
|
|
106
106
|
}
|
|
107
107
|
originX.value = clientX;
|
|
@@ -122,7 +122,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
122
122
|
sliderButtonLeft.value = moveX > props.canvasWidth - 56 ? props.canvasWidth - 56 : moveX;
|
|
123
123
|
let blockLeft = (props.canvasWidth - 40 - 20) / (props.canvasWidth - 40) * moveX;
|
|
124
124
|
block.value.style.left = (blockLeft > props.canvasWidth - 56 - 18 - 7 ? props.canvasWidth - 56 - 18 - 7 : blockLeft) + "px";
|
|
125
|
-
|
|
125
|
+
isVerifyActive.value = true;
|
|
126
126
|
sliderBoxWidth.value = moveX + 28;
|
|
127
127
|
dragDistanceList.value.push(moveY);
|
|
128
128
|
};
|
|
@@ -135,7 +135,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
135
135
|
return false;
|
|
136
136
|
}
|
|
137
137
|
isLoading.value = true;
|
|
138
|
-
|
|
138
|
+
isVerifyActive.value = false;
|
|
139
139
|
timestamp.value = +/* @__PURE__ */ new Date() - timestamp.value;
|
|
140
140
|
const moveLength = parseInt(block.value.style.left);
|
|
141
141
|
if (timestamp.value > 1e4) {
|
|
@@ -149,7 +149,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
149
149
|
captcha: moveLength
|
|
150
150
|
};
|
|
151
151
|
httpConfig.http.get("/sso-api/standard/framework-captcha/validateSliderCaptcha", { params }).then((res) => {
|
|
152
|
-
|
|
152
|
+
verifySuccessEvent();
|
|
153
|
+
setTimeout(() => {
|
|
154
|
+
emit("success", { key: key.value, value: moveLength });
|
|
155
|
+
}, 500);
|
|
153
156
|
}).catch(() => {
|
|
154
157
|
verifyFailEvent();
|
|
155
158
|
});
|
|
@@ -164,18 +167,30 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
164
167
|
const stdDev = Math.sqrt(deviations.map(calcSquare).reduce(calcSum) / arr.length);
|
|
165
168
|
return average !== stdDev;
|
|
166
169
|
};
|
|
170
|
+
const verifySuccessEvent = () => {
|
|
171
|
+
isLoading.value = false;
|
|
172
|
+
isVerifySuccess.value = true;
|
|
173
|
+
const elapsedTime = (timestamp.value / 1e3).toFixed(1);
|
|
174
|
+
if (elapsedTime < 1) {
|
|
175
|
+
successHint.value = `仅仅${elapsedTime}S，你的速度快如闪电`;
|
|
176
|
+
} else if (elapsedTime < 2) {
|
|
177
|
+
successHint.value = `只用了${elapsedTime}S，这速度简直完美`;
|
|
178
|
+
} else {
|
|
179
|
+
successHint.value = `耗时${elapsedTime}S，争取下次再快一点`;
|
|
180
|
+
}
|
|
181
|
+
};
|
|
167
182
|
const verifyFailEvent = () => {
|
|
168
|
-
|
|
183
|
+
isVerifyFail.value = true;
|
|
169
184
|
emit("fail", {});
|
|
170
185
|
refresh();
|
|
171
186
|
};
|
|
172
187
|
const refresh = () => {
|
|
173
188
|
setTimeout(() => {
|
|
174
|
-
|
|
189
|
+
isVerifyFail.value = false;
|
|
175
190
|
}, 300);
|
|
176
191
|
isLoading.value = true;
|
|
177
|
-
|
|
178
|
-
|
|
192
|
+
isVerifyActive.value = false;
|
|
193
|
+
isVerifySuccess.value = false;
|
|
179
194
|
block.value.style.left = 0;
|
|
180
195
|
sliderBoxWidth.value = 0;
|
|
181
196
|
sliderButtonLeft.value = 0;
|
|
@@ -216,10 +231,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
216
231
|
}, [
|
|
217
232
|
isLoading.value ? (vue.openBlock(), vue.createElementBlock("div", {
|
|
218
233
|
key: 0,
|
|
219
|
-
class: vue.normalizeClass({ "img-loading": isLoading.value }),
|
|
234
|
+
class: vue.normalizeClass({ "yu-slider-captcha-img-loading": isLoading.value }),
|
|
220
235
|
style: vue.normalizeStyle({ height: _ctx.canvasHeight + "px" })
|
|
221
236
|
}, null, 6)) : vue.createCommentVNode("", true),
|
|
222
|
-
|
|
237
|
+
isVerifySuccess.value ? (vue.openBlock(), vue.createElementBlock("div", {
|
|
223
238
|
key: 1,
|
|
224
239
|
class: "success-hint",
|
|
225
240
|
style: vue.normalizeStyle({ height: _ctx.canvasHeight + "px" })
|
|
@@ -227,33 +242,33 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
227
242
|
vue.createElementVNode("img", {
|
|
228
243
|
ref_key: "canvas",
|
|
229
244
|
ref: canvas,
|
|
230
|
-
class: "
|
|
245
|
+
class: "yu-slider-captcha-canvas",
|
|
231
246
|
width: _ctx.canvasWidth,
|
|
232
247
|
height: _ctx.canvasHeight
|
|
233
248
|
}, null, 8, _hoisted_3),
|
|
234
249
|
vue.createElementVNode("img", {
|
|
235
250
|
ref_key: "block",
|
|
236
251
|
ref: block,
|
|
237
|
-
class: vue.normalizeClass(["yu-
|
|
252
|
+
class: vue.normalizeClass(["yu-slider-captcha-block", { "is-verify-fail": isVerifyFail.value }])
|
|
238
253
|
}, null, 2),
|
|
239
254
|
vue.createElementVNode("div", {
|
|
240
|
-
class: vue.normalizeClass(["slider", { "verify-active":
|
|
255
|
+
class: vue.normalizeClass(["yu-slider-captcha-slider", { "is-verify-active": isVerifyActive.value, "is-verify-success": isVerifySuccess.value, "is-verify-fail": isVerifyFail.value }])
|
|
241
256
|
}, [
|
|
242
257
|
vue.createElementVNode("div", {
|
|
243
|
-
class: "slider-box
|
|
258
|
+
class: "yu-slider-captcha-slider-box",
|
|
244
259
|
style: vue.normalizeStyle({ width: sliderBoxWidth.value + "px" })
|
|
245
260
|
}, [
|
|
246
261
|
vue.createElementVNode("div", {
|
|
247
|
-
class: "yu-slider-button",
|
|
262
|
+
class: "yu-slider-captcha-slider-button",
|
|
248
263
|
id: "slider-button",
|
|
249
264
|
style: vue.normalizeStyle({ left: sliderButtonLeft.value + "px" })
|
|
250
265
|
}, [
|
|
251
266
|
!isSliderSlide.value ? (vue.openBlock(), vue.createBlock(vue.unref(icons.SliderArrowStatic), {
|
|
252
267
|
key: 0,
|
|
253
|
-
class: "yu-slider-button-icon yu-color-primary"
|
|
268
|
+
class: "yu-slider-captcha-slider-button-icon yu-color-primary"
|
|
254
269
|
})) : (vue.openBlock(), vue.createBlock(vue.unref(icons.SliderArrowSlide), {
|
|
255
270
|
key: 1,
|
|
256
|
-
class: "yu-slider-button-icon yu-color-primary"
|
|
271
|
+
class: "yu-slider-captcha-slider-button-icon yu-color-primary"
|
|
257
272
|
}))
|
|
258
273
|
], 4)
|
|
259
274
|
], 4),
|
|
@@ -3,11 +3,11 @@ const vue = require("vue");
|
|
|
3
3
|
const SliderCaptcha = require("./SliderCaptcha");
|
|
4
4
|
const _hoisted_1 = {
|
|
5
5
|
key: 0,
|
|
6
|
-
class: "yu-slider-captcha-dialog
|
|
6
|
+
class: "yu-slider-captcha-dialog"
|
|
7
7
|
};
|
|
8
8
|
const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "yu-slider-captcha-dialog-modal" }, null, -1);
|
|
9
9
|
const _hoisted_3 = { class: "yu-slider-captcha-dialog-wrapper" };
|
|
10
|
-
const _hoisted_4 = { class: "yu-slider-captcha-dialog slide-up" };
|
|
10
|
+
const _hoisted_4 = { class: "yu-slider-captcha-dialog yu-slider-captcha-slide-up" };
|
|
11
11
|
const _hoisted_5 = { class: "yu-slider-captcha" };
|
|
12
12
|
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
13
13
|
...{ name: "YuSliderCaptchaDialog" },
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
|
+
/* 滑块验证码弹出框 */
|
|
3
|
+
.yu-slider-captcha-dialog {
|
|
2
4
|
.yu-slider-captcha-dialog-modal {
|
|
3
5
|
position: fixed;
|
|
4
6
|
left: 0;
|
|
@@ -47,11 +49,11 @@
|
|
|
47
49
|
}
|
|
48
50
|
}
|
|
49
51
|
|
|
50
|
-
.slide-up {
|
|
51
|
-
animation: slide-up-animation 0.5s ease;
|
|
52
|
+
.yu-slider-captcha-slide-up {
|
|
53
|
+
animation: yu-slider-captcha-slide-up-animation 0.5s ease;
|
|
52
54
|
}
|
|
53
55
|
|
|
54
|
-
@keyframes slide-up-animation {
|
|
56
|
+
@keyframes yu-slider-captcha-slide-up-animation {
|
|
55
57
|
0% {
|
|
56
58
|
transform: translate(-50%, 100%);
|
|
57
59
|
}
|
|
@@ -65,6 +67,7 @@
|
|
|
65
67
|
|
|
66
68
|
|
|
67
69
|
|
|
70
|
+
/* 滑块验证码弹容器 */
|
|
68
71
|
.yu-slider-captcha-container {
|
|
69
72
|
.yu-slider-captcha {
|
|
70
73
|
position: relative;
|
|
@@ -112,14 +115,14 @@
|
|
|
112
115
|
}
|
|
113
116
|
|
|
114
117
|
/*图片加载样式*/
|
|
115
|
-
.img-loading {
|
|
118
|
+
.yu-slider-captcha-img-loading {
|
|
116
119
|
position: absolute;
|
|
117
120
|
top: 0;
|
|
118
121
|
right: 0;
|
|
119
122
|
left: 0;
|
|
120
123
|
bottom: 0;
|
|
121
124
|
z-index: 999;
|
|
122
|
-
animation: loading 1.5s infinite;
|
|
125
|
+
animation: yu-slider-captcha-loading 1.5s infinite;
|
|
123
126
|
background-image: url(../images/loading.svg);
|
|
124
127
|
background-repeat: no-repeat;
|
|
125
128
|
background-position: center center;
|
|
@@ -128,7 +131,7 @@
|
|
|
128
131
|
//border-radius: 5px;
|
|
129
132
|
}
|
|
130
133
|
|
|
131
|
-
@keyframes loading {
|
|
134
|
+
@keyframes yu-slider-captcha-loading {
|
|
132
135
|
0% {
|
|
133
136
|
opacity: 0.7;
|
|
134
137
|
}
|
|
@@ -165,12 +168,12 @@
|
|
|
165
168
|
//}
|
|
166
169
|
|
|
167
170
|
/*验证图片*/
|
|
168
|
-
.
|
|
171
|
+
.yu-slider-captcha-canvas {
|
|
169
172
|
//border-radius: 5px;
|
|
170
173
|
}
|
|
171
174
|
|
|
172
175
|
/*阻塞块*/
|
|
173
|
-
.yu-
|
|
176
|
+
.yu-slider-captcha-block {
|
|
174
177
|
position: absolute;
|
|
175
178
|
left: 0;
|
|
176
179
|
top: 0;
|
|
@@ -179,12 +182,12 @@
|
|
|
179
182
|
}
|
|
180
183
|
|
|
181
184
|
/*校验失败时的阻塞块样式*/
|
|
182
|
-
.yu-
|
|
185
|
+
.yu-slider-captcha-block.is-verify-fail {
|
|
183
186
|
transition: left 0.5s linear;
|
|
184
187
|
}
|
|
185
188
|
|
|
186
189
|
/*滑动条*/
|
|
187
|
-
.slider {
|
|
190
|
+
.yu-slider-captcha-slider {
|
|
188
191
|
position: relative;
|
|
189
192
|
text-align: center;
|
|
190
193
|
width: 100%;
|
|
@@ -201,7 +204,7 @@
|
|
|
201
204
|
}
|
|
202
205
|
|
|
203
206
|
/*滑动盒子*/
|
|
204
|
-
.slider-box {
|
|
207
|
+
.yu-slider-captcha-slider-box {
|
|
205
208
|
position: absolute;
|
|
206
209
|
left: 0;
|
|
207
210
|
top: 0;
|
|
@@ -214,7 +217,7 @@
|
|
|
214
217
|
}
|
|
215
218
|
|
|
216
219
|
/*滑动按钮*/
|
|
217
|
-
.yu-slider-button {
|
|
220
|
+
.yu-slider-captcha-slider-button {
|
|
218
221
|
background-color: rgb(255, 255, 255);
|
|
219
222
|
color: white;
|
|
220
223
|
text-align: center;
|
|
@@ -235,17 +238,17 @@
|
|
|
235
238
|
}
|
|
236
239
|
|
|
237
240
|
/*鼠标悬浮时的按钮样式*/
|
|
238
|
-
.yu-slider-button:hover {
|
|
241
|
+
.yu-slider-captcha-slider-button:hover {
|
|
239
242
|
//background: #1991FA
|
|
240
243
|
cursor: pointer;
|
|
241
244
|
}
|
|
242
245
|
|
|
243
246
|
/*鼠标悬浮时的按钮图标样式*/
|
|
244
|
-
.yu-slider-button:hover .yu-slider-button-icon {
|
|
247
|
+
.yu-slider-captcha-slider-button:hover .yu-slider-captcha-slider-button-icon {
|
|
245
248
|
}
|
|
246
249
|
|
|
247
250
|
/*滑动按钮图标*/
|
|
248
|
-
.yu-slider-button-icon {
|
|
251
|
+
.yu-slider-captcha-slider-button-icon {
|
|
249
252
|
width: 32px;
|
|
250
253
|
height: 32px;
|
|
251
254
|
font-size: 24px;
|
|
@@ -254,42 +257,42 @@
|
|
|
254
257
|
}
|
|
255
258
|
|
|
256
259
|
/*校验时的按钮样式*/
|
|
257
|
-
.verify-active .slider-button {
|
|
260
|
+
.is-verify-active .slider-button {
|
|
258
261
|
//height: 38px;
|
|
259
262
|
//top: -1px;
|
|
260
263
|
//border: 1px solid #1991FA;
|
|
261
264
|
}
|
|
262
265
|
|
|
263
266
|
/*校验时的滑动箱样式*/
|
|
264
|
-
.verify-active .slider-box {
|
|
267
|
+
.is-verify-active .yu-slider-captcha-slider-box {
|
|
265
268
|
height: 40px;
|
|
266
269
|
border-width: 1px;
|
|
267
270
|
}
|
|
268
271
|
|
|
269
272
|
/*校验成功时的滑动箱样式*/
|
|
270
|
-
.verify-success .slider-box {
|
|
273
|
+
.is-verify-success .yu-slider-captcha-slider-box {
|
|
271
274
|
height: 40px;
|
|
272
275
|
}
|
|
273
276
|
|
|
274
277
|
/*校验成功时的按钮样式*/
|
|
275
|
-
.verify-success .slider-button {
|
|
278
|
+
.is-verify-success .slider-button {
|
|
276
279
|
}
|
|
277
280
|
|
|
278
281
|
/*校验成功时的按钮图标样式*/
|
|
279
|
-
.verify-success .yu-slider-button-icon {
|
|
282
|
+
.is-verify-success .yu-slider-captcha-slider-button-icon {
|
|
280
283
|
background-position: 0 0 !important;
|
|
281
284
|
}
|
|
282
285
|
|
|
283
286
|
/*校验失败时的滑动箱样式*/
|
|
284
|
-
.verify-fail .slider-box {
|
|
287
|
+
.is-verify-fail .yu-slider-captcha-slider-box {
|
|
285
288
|
transition: width 0.5s linear;
|
|
286
289
|
}
|
|
287
290
|
|
|
288
291
|
/*校验失败时的按钮样式*/
|
|
289
|
-
.verify-fail .slider-button {
|
|
292
|
+
.is-verify-fail .slider-button {
|
|
290
293
|
transition: left 0.5s linear;
|
|
291
294
|
}
|
|
292
295
|
|
|
293
296
|
/*校验失败时的按钮图标样式*/
|
|
294
|
-
.verify-fail .yu-slider-button-icon {
|
|
297
|
+
.is-verify-fail .yu-slider-captcha-slider-button-icon {
|
|
295
298
|
}
|