Mand MobileCaptcha 验证码
验证码校验窗口
引入
import { Captcha } from 'mand-mobile-next'
Vue.createApp().component(Captcha.name, Captcha)
代码演示
API
Captcha Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 验证码窗口是否显示 | Boolean | false |
| is-view | 是否内嵌在页面内展示，否则以弹层形式 | Boolean | false |
| maxlength | 字符最大输入长度, 若为-1则不限制输入长度 | Number | 4 |
| mask | 是否掩码 | Boolean | false |
| system | 是否使用系统默认键盘 | Boolean | false |
| auto-send | 第一次展示时是否触发send事件，否则需手动点击发送按钮 | Boolean | true |
| auto-countdown | 手动点击发送按钮后是否自动开始倒计时，否则需手动调用countdown | Boolean | true |
| title | 标题 | String | |
| brief | 描述 | String | |
| count | 倒计时时长, 设置为0的时候不显示倒计时按钮 | Number | 60 |
| count-normal-text | 发送验证码正常状态文字 | String | 发送验证码 |
| count-active-text | 发送验证码及倒计时按钮文案配置项 | String | {$1}秒后重发 |
| append-to | 挂载节点 | HTMLElement | document.body |
Captcha Methods
countdown()
开始倒计时
resetcount()
重置倒计时
setError(message)
设置报错信息并显示
Captcha Events
@show()
验证码组件显示事件
@hide()
验证码组件隐藏事件
@send(countdown)
发送验证码事件, 第一次打开时或点击重发按钮后触发并开始倒计时，如果auto-countdown为false需手动调用countdown开始倒计时
@submit(code)
用户提交输入内容事件