Vue3组合api中开发element-plus自定义组件验证码

之前vue2中，开发了一个自定义组件，登录注册的验证码，使用vue3后，element也升级到了plus，所以需要重写了。

此组件必须是使用element-plus框架中的，form组件，因为需要配合form组件的表单校验来实现的，另外必须是使用组合api，而并非传统的模式。

模版代码如下，el-form-item是el-form下的一个元素，handleToUpper当输入小写字母，自动转换成大写，<span>标签里是代码生成的验证码，点击可以刷新。

<template>
	<el-form-item prop="veriflCode">
		<el-input @input="handleToUpper" class="inputCode" maxlength="4" 
		prefix-icon="iconfont icon-yanzhengma"
			placeholder="请输入验证码" v-model="inputCode"></el-input>
		<span class="initCode" @click="handleRefushCode">{{initCode}}</span>
	</el-form-item>
</template>

逻辑代码略微复杂点，详情可以看注释，其中createVerifCode是自己写的一个生成验证码的方法，这个太简单了，代码就不贴了，大家可以自由发挥，具体代码如下：

<script>
	import {
		// 生成验证码
		createNormalCode
	} from 'utils/createVerifCode.js'
	import {
		defineComponent,
		ref,
		onBeforeMount
	} from 'vue'
	export default defineComponent({
		// 父组件必须传入rules规则
		props: {
			rules: {
				type: Object,
				required: true
			}
		},
		setup(props) {
			// 生成的验证码
			let initCode = ref('')
			// 用户输入的验证码
			const inputCode = ref('')
			let selfrules = {}

			// 验证码的验证规则
			const validateVeriflCode = (rule, value, callback) => {
				if (initCode.value === inputCode.value.toUpperCase()) {
					callback()
				} else {
					resetCode()
					callback(new Error('验证码错误'))
				}
			}
			// 提供给父组件rules
			const veriflCode = [{
				validator: validateVeriflCode,
				trigger: 'blur'
			}]

			// 所有输入转成大写
			const handleToUpper = () => {
				inputCode.value = inputCode.value.toUpperCase()
				return true
			}

			// 刷新验证码
			const handleRefushCode = () => {
				initCode.value = createNormalCode(4)
			}

			// 重置验证码
			// 父组件也可通过$refs来执行此方法
			const resetCode = () => {
				handleRefushCode()
				inputCode.value = ''
			}

			// 必须使用BeforeMount生命周期
			// onMounted则父组件无法加载子组件的验证方法
			onBeforeMount(() => {
				handleRefushCode()
				// 将父组件的rules赋值给本组件
				selfrules.value = props.rules
				// 由于只引用传递，所以更改本组件的rules同时也会更改父组件的rules
				// 举例：父组件rules如下
				// const loginRules = {
				// 	username: [{
				// 		validator: validateName,
				// 		trigger: 'blur'
				// 	}],
				// 	password: [{
				// 		validator: validatePass,
				// 		trigger: 'blur'
				// 	}]
				// }
				// 传入后怎会在loginRulse下添加一个veriflCode属性即
				// username...,
				// password...,
				// veriflCode = [{
				// validator: validateVeriflCode,
				// trigger: 'blur'
				// }]
				selfrules.value.veriflCode = veriflCode
			})

			return {
				initCode,
				inputCode,
				handleToUpper,
				resetCode,
				handleRefushCode
			}
		}
	})
</script>
<style lang="less" scoped>
	.initCode {
		position: absolute;
		right: 5px;
		top: 0;
		color: #282828;
		cursor: pointer;
	}

	.inputCode input {
		transform: uppercase;
		color: red;
	}
</style>

最后就是样式了：

<style lang="less" scoped>
	.initCode {
		position: absolute;
		right: 5px;
		top: 0;
		color: #282828;
		cursor: pointer;
	}

	.inputCode input {
		transform: uppercase;
		color: red;
	}
</style>

父组件如果需要引入，也非常简单，rulles必须传递父组件中el-from的rules，即可。

<VerificationCode ref="verifCodeRef" :rules="loginRules" />

效果如下：