LunarXYZCaptchaCode
图形验证码。
Features
- 组件渲染时，自动获取一次图形验证码
- 点击验证码图片时，可以刷新图形验证码
- 在输入框输入的答案，会自动同步给父组件
Props
ts
defineProps({
/**
* 是否显示
* @description 如果父组件是弹窗类的组件，需要传进来用于侦听验证码刷新
*/
show: {
type: Boolean,
required: false,
default: false,
},
/**
* 验证码答案
* @description 用于短信验证接口的参数
* @tips 必须用双向绑定的形式来传递才能触发父组件的数据更新
* @example `v-model:answer`
*/
answer: {
type: String,
required: true,
default: '',
},
/**
* 获取图形验证码时的随机数
* @description 用于短信验证接口的参数
* @tips 必须用双向绑定的形式来传递才能触发父组件的数据更新
* @example `v-model:randomStr`
*/
randomStr: {
type: String,
required: true,
default: '',
},
})
Live Demo
answer: -
randomStr:
上面是数据，下面是组件
Usage Example
请注意使用 v-model:arg 的格式对 Props 进行双向绑定，否则无法触发数据更新。
vue
<template>
<CaptchaCode
v-model:answer="answer"
v-model:randomStr="randomStr"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { CaptchaCode } from '@lunarxyz/components'
const answer = ref<string>('')
const randomStr = ref<string>('')
</script>