lanyun-verification-code

介绍

该组件使用按钮提供倒计时功能

使用方法

import "../../components/lanyun-verification-code/lanyun-verification-code.stml";

例子

<lanyun-verification-code
    id="code"
    @click="handleClick"
    @start="handleStart"
    @end="handleEnd"
    @change="handleChange"
    :seconds="5"
    start-text="开始获取验证码"
    change-text="s 秒之后获取"
    end-text="重新获取验证码"
    class="btn"
/>

props 属性

参数 说明 类型 默认值
seconds 倒计时所需的秒数, 必填 number | string 60
start-text 开始前的提示语, 选填 string 获取验证码
change-text 倒计时期间的提示语，必须带有字母"s",否则不显示秒数,"s"不区分大小写, 选填 string s 秒重新获取
end-text 倒计结束的提示语, 选填 string 获取验证码

events 事件

事件名 说明 回调参数
click 当点击按钮时触发 canGetCode: 当前是否可以获取验证码
change 倒计时期间，每秒触发一次 seconds: 当前剩余的秒数
start 开始倒计时触发 -
end 结束倒计时触发 -

methods 方法

方法名 说明 参数
start 开始倒计时 -
reset 结束当前正在进行中的倒计时,重置为重新获取状态 -

帮助说明

用户可能在倒计时的过程中点击获取验证码的按钮，click事件提供了参数canGetCode，在倒计时的过程中，该值为false，如果为false应该给予提示并不要再次向后端请求验证码，如果为true，则为获取验证码之前，或者倒计结束之后，可以再次向后端请求验证码。

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18