CountdownVerify 验证码倒计时

用于发送验证码后的倒计时反馈。发送请求成功后调用组件方法开始倒计时，失败时恢复按钮状态。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 验证码发送按钮 -->
<fui-countdown-verify ref="verifyRef" @send="handleSend" />

在页面的 handleSend 方法中调用项目的验证码发送接口。确认发送成功后调用 this.$refs.verifyRef.success() 开始倒计时；发送失败时调用 this.$refs.verifyRef.reset() 恢复按钮，并向用户显示失败原因。

属性

尺寸和间距的单位为 rpx。

属性	类型	说明	官网默认值
text	String	可发送时的文字	发送验证码
sending	String	发送中的文字	正在发送...
sent	String	倒计时文字，前面自动附加秒数	s后重新获取
seconds	Number / String	倒计时秒数	60
width	Number / String	按钮宽度	192
height	Number / String	按钮高度	60
marginLeft	Number / String	左外边距	0
marginRight	Number / String	右外边距	0
radius	Number / String	圆角	8
size	Number / String	文字大小	24
color	String	文字颜色	#465CFF
background	String	背景色	transparent
borderColor	String	边框颜色	#465CFF
param	Number / String	事件中携带的自定义参数	0

事件

事件	说明	回调参数
send	点击发送按钮时触发	{ param }
countdown	倒计时进行时触发	{ param, seconds }
end	倒计时结束时触发	{ param }

方法

通过组件实例调用 success() 开始倒计时，调用 reset() 恢复初始状态。

平台说明

非 nvue 平台的 color 和 borderColor 本地默认值为空，默认颜色由 --fui-color-primary 控制。

插槽

插槽	说明
—	官网未列出该组件的插槽