VerificationCode 验证码倒计时

按钮触发获取验证码,展示倒计时。

代码演示

基础用法

点击获取验证码触发onClick事件并开始倒计时或设置autoCountDowntrue自动开始倒计时。

<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设置主题,支持主题类型有primaryerrorwarningsuccess,默认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

NameDescriptionTypeRequiredDefault
second验证码倒计时秒数(单位s)Numberfalse默认值:60
type主题类型'primary' / 'error' / 'warning' / 'success'false默认值:primary
autoCountDown是否自动开启倒计时Booleanfalse默认值:false

Events

Event NameDescriptionParameters
onClick验证码按钮点击事件-
timeup倒计时结束时触发-