# tui-countdown-verify 验证码倒计时

介绍

短信验证码倒计时,可重置,可设置样式。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiCountdownVerify from "@/components/thorui/tui-countdown-verify/tui-countdown-verify"
export default {
	components:{
		tuiCountdownVerify
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-countdown-verify": "/components/thorui/tui-countdown-verify/tui-countdown-verify"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

默认使用

通过 successVal 属性设置短信发送成功(改变数值且数值大于0表示发送成功,多次发送数值递增即可),params 属性设置自定义参数。

<!--uni-app-->
<tui-countdown-verify :successVal="successVal" @send="send" :params="1"></tui-countdown-verify>

<!--微信小程序-->
<tui-countdown-verify successVal="{{successVal}}" bindsend="send" params="{{1}}"></tui-countdown-verify>
默认为倒计时状态

通过 start 属性设置是否默认为倒计时状态。

<tui-countdown-verify start></tui-countdown-verify>
设置倒计时秒数为120s

通过 seconds 属性设置是倒计时秒数。

<!--uni-app-->
<tui-countdown-verify :seconds="120"></tui-countdown-verify>

<!--微信小程序-->
<tui-countdown-verify seconds="{{120}}"></tui-countdown-verify>

# Slots

none

# Props

参数 类型 说明 默认值
text String 发送前显示文本 发送验证码
sendText String 发送中显示文本 请稍候...
countdownText String 发送后显示文本(前面会自动加上seconds) s后获取
seconds Number 倒计时秒数 60
width String 按钮宽度 182rpx
height String 按钮高度 56rpx
padding String 按钮padding值 0
margin String 按钮margin值 0
radius String 按钮圆角值 6rpx
size Number 按钮字体大小 24
color String 按钮字体颜色 #5677fc
background String 按钮背景颜色色 transparent
borderWidth String 按钮边框宽度 1px
borderColor String 按钮边框颜色 #5677fc
isOpacity Boolean 倒计时的时候是否改变opacity值 true
hover Boolean 是否需要点击效果 true
successVal Number 短信发送成功(改变数值且数值大于0表示发送成功,多次发送数值递增即可) 0
resetVal Number 重置组件状态(改变数值且数值大于0,多次重置数值递增即可) 0
start Boolean 是否默认为倒计时状态 false
params [Number, String] 自定义参数 0

# Events

事件名 说明 回调参数
send 点击按钮触发,发送短信 { params : 自定义参数 }
countdown 倒计时 { seconds : 剩余秒数2 , params : 自定义参数 }
end 倒计时结束 { params : 自定义参数 }

# Methods

方法名 说明 传入参数
success 验证码发送成功,也可使用属性 successVal 控制 -
reset 重置发送组件,也可使用属性 resetVal 控制 -

# 预览

请以移动端效果为准,touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码