tui-countdown-verify 验证码倒计时 会员组件

介绍

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

引入

uni-app引入

第一种，手动引入（可全局引入）

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

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

uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	✓	✓	✓	✓	✓	✓	✓

微信小程序引入（可在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

插槽名称	插槽说明
-	-

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

注：uni-app端绑定事件使用@前缀，如@send；微信小程序原生使用bind前缀，如bindsend

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

Methods

如何调用方法详见 进阶用法 介绍

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

预览

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

特别说明

该组件为 会员组件，非开源内容，需开通会员才可获取使用。

线上程序扫码预览

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