slider-captcha.vue
3.54 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<script lang="ts" setup>
import type {
CaptchaVerifyPassingData,
SliderCaptchaActionType,
} from '@vben/common-ui';
import { ref } from 'vue';
import { Page, SliderCaptcha } from '@vben/common-ui';
import { Bell, Sun } from '@vben/icons';
import { Button, Card, message } from 'ant-design-vue';
function handleSuccess(data: CaptchaVerifyPassingData) {
const { time } = data;
message.success(`校验成功,耗时${time}秒`);
}
function handleBtnClick(elRef?: SliderCaptchaActionType) {
if (!elRef) {
return;
}
elRef.resume();
}
const el1 = ref<SliderCaptchaActionType>();
const el2 = ref<SliderCaptchaActionType>();
const el3 = ref<SliderCaptchaActionType>();
const el4 = ref<SliderCaptchaActionType>();
const el5 = ref<SliderCaptchaActionType>();
const el6 = ref<SliderCaptchaActionType>();
</script>
<template>
<Page description="用于前端简单的拖动校验场景" title="滑块校验">
<Card class="mb-5" title="基础示例">
<div class="flex items-center justify-center p-4 px-[30%]">
<SliderCaptcha ref="el1" @success="handleSuccess" />
<Button class="ml-2" type="primary" @click="handleBtnClick(el1)">
还原
</Button>
</div>
</Card>
<Card class="mb-5" title="自定义圆角">
<div class="flex items-center justify-center p-4 px-[30%]">
<SliderCaptcha
ref="el2"
class="rounded-full"
@success="handleSuccess"
/>
<Button class="ml-2" type="primary" @click="handleBtnClick(el2)">
还原
</Button>
</div>
</Card>
<Card class="mb-5" title="自定义背景色">
<div class="flex items-center justify-center p-4 px-[30%]">
<SliderCaptcha
ref="el3"
:bar-style="{
backgroundColor: '#018ffb',
}"
success-text="校验成功"
text="拖动以进行校验"
@success="handleSuccess"
/>
<Button class="ml-2" type="primary" @click="handleBtnClick(el3)">
还原
</Button>
</div>
</Card>
<Card class="mb-5" title="自定义拖拽图标">
<div class="flex items-center justify-center p-4 px-[30%]">
<SliderCaptcha ref="el4" @success="handleSuccess">
<template #actionIcon="{ isPassing }">
<Bell v-if="isPassing" />
<Sun v-else />
</template>
</SliderCaptcha>
<Button class="ml-2" type="primary" @click="handleBtnClick(el4)">
还原
</Button>
</div>
</Card>
<Card class="mb-5" title="自定义文本">
<div class="flex items-center justify-center p-4 px-[30%]">
<SliderCaptcha
ref="el5"
success-text="成功"
text="拖动"
@success="handleSuccess"
/>
<Button class="ml-2" type="primary" @click="handleBtnClick(el5)">
还原
</Button>
</div>
</Card>
<Card class="mb-5" title="自定义内容(slot)">
<div class="flex items-center justify-center p-4 px-[30%]">
<SliderCaptcha ref="el6" @success="handleSuccess">
<template #text="{ isPassing }">
<template v-if="isPassing">
<Bell class="mr-2 size-4" />
成功
</template>
<template v-else>
拖动
<Sun class="ml-2 size-4" />
</template>
</template>
</SliderCaptcha>
<Button class="ml-2" type="primary" @click="handleBtnClick(el6)">
还原
</Button>
</div>
</Card>
</Page>
</template>