最近在写一个注册表单的需要一个滑动验证模块。

👨‍💻网上搜寻一番，发现了一个组件比较好用vue3-puzzle-vcode

  • 配合ELement-Plus: dialog 和 form 组件使用

Login组件控制Register表单组件显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//login.vue

<script lang="ts" setup>
import { ref } from 'vue'
import Register from '@/components/Register.vue'
const registerDiaVisible = ref(false)
const openRegisterDia = () => {
	registerDiaVisible.value = true
}
</script>

<template>
...
<Register v-model:registerDiaVisible="registerDiaVisible" />
...
</template>

Register组件

（表单校验成功后，打开滑动验证组件，再次成功调用onSuccess）

注意调整滑动验证组件的z-index，默认el-dialog组件层级高于Vcode

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
<script lang="ts" setup>
import { formPost } from '@/api/request'
import { ElMessage, FormInstance } from 'element-plus'
import { reactive, ref } from 'vue'
import { RegisterForm } from '@/ts/interfaces/login.interface'
import Vcode from 'vue3-puzzle-vcode'
const props = defineProps<{
	registerDiaVisible: boolean
}>()

const emit = defineEmits<{
	'update:registerDiaVisible': [registerDiaVisible: boolean]
}>()

const handleCancel = () => {
	emit('update:registerDiaVisible', false)
}

//表单绑定的响应式对象
const formData = reactive({
	nickName: '',
	realName: '',
	pwd: ''
})

// 表单的引用对象
const formRef = ref()
// 表单校验
const rules = reactive({
	nickName: [
		{ required: true, message: '请输入昵称', trigger: 'blur' },
		{ min: 3, max: 10, message: '请输入3-10位昵称', trigger: 'blur' }
	],
	realName: [
		{ required: true, message: '请输入用户名', trigger: 'blur' },
		{ min: 3, max: 10, message: '请输入3-10位用户名', trigger: 'blur' }
	],
	pwd: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
		{ min: 3, max: 10, message: '请输入3-10位密码', trigger: 'blur' }
	]
})

const onClose = () => {
	isShow.value = !isShow.value
}
const onSuccess = () => {
	// 滑动验证成功, 发送请求
	formPost<RegisterForm, string>({
		url: '/user/register',
		data: { ...formData }
	})
		.then(res => {
			isShow.value = !isShow.value
			ElMessage.success(res.data)
		})
		.catch(err => {
			isShow.value = !isShow.value
			ElMessage.error(err.msg)
		})
}

const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid, fields) => {
		if (valid) {
			isShow.value = !isShow.value
		} else {
			console.log('error submit!', fields)
		}
	})
}

const isShow = ref(false)
</script>

<template>
	<el-dialog
		title="用户注册"
		v-model="props.registerDiaVisible"
		:before-close="handleCancel"
	>
		<el-form :rules="rules" :model="formData" ref="formRef">
			<el-form-item label="昵称:" label-width="120" prop="nickName">
				<el-input v-model="formData.nickName" />
			</el-form-item>
			<el-form-item label="姓名:" label-width="120" prop="realName">
				<el-input v-model="formData.realName" />
			</el-form-item>
			<el-form-item label="密码:" label-width="120" prop="pwd">
				<el-input v-model="formData.pwd" show-password />
			</el-form-item>
			<div>
				<el-button @click="handleCancel">取 消</el-button>
				<el-button type="primary" @click="onSubmit(formRef)">
					确 定
				</el-button>
			</div>
		</el-form>
	</el-dialog>
	<Vcode :show="isShow" @success="onSuccess" @close="onClose" />
</template>

<style lang="scss" scoped>
:global(.vue-puzzle-vcode) {
	z-index: 10000;
}
</style>

final

滑动验证