VerificationCode 验证码倒计时
按钮触发获取验证码,展示倒计时。
代码演示
基础用法
点击获取验证码触发onClick
事件并开始倒计时或设置autoCountDown
为true
自动开始倒计时。
<hd-verification-code :autoCountDown="autoCountDown" @onClick="onClick"></hd-verification-code>
const autoCountDown = ref<boolean>(true)
function onClick() {
console.log('点击获取验证码')
}
倒计时时间
通过second
设置倒计时时间,默认60s。
<hd-verification-code :second="second"></hd-verification-code>
const second= ref<number>(60)
主题颜色
通过type
设置主题,支持主题类型有primary
、error
、warning
、success
,默认primary
。
<hd-verification-code type="primary"></hd-verification-code>
<hd-verification-code type="error"></hd-verification-code>
<hd-verification-code type="warning"></hd-verification-code>
<hd-verification-code type="success"></hd-verification-code>
Props
Name | Description | Type | Required | Default |
---|---|---|---|---|
second | 验证码倒计时秒数(单位s) | Number | false | 默认值:60 |
type | 主题类型 | 'primary' / 'error' / 'warning' / 'success' | false | 默认值:primary |
autoCountDown | 是否自动开启倒计时 | Boolean | false | 默认值:false |
Events
Event Name | Description | Parameters |
---|---|---|
onClick | 验证码按钮点击事件 | - |
timeup | 倒计时结束时触发 | - |