2018-03-26 16:04:04 +08:00
|
|
|
---
|
|
|
|
|
title: CodeBox 验证码输入框
|
2019-01-29 16:31:24 +08:00
|
|
|
preview: https://didi.github.io/mand-mobile/examples/#/codebox
|
2018-03-26 16:04:04 +08:00
|
|
|
---
|
|
|
|
|
|
|
|
|
|
验证码输入框
|
|
|
|
|
|
|
|
|
|
### 引入
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
import { Codebox } from 'mand-mobile'
|
|
|
|
|
|
|
|
|
|
Vue.component(Codebox.name, Codebox)
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 代码演示
|
|
|
|
|
<!-- DEMO -->
|
|
|
|
|
|
|
|
|
|
### API
|
|
|
|
|
|
|
|
|
|
#### Codebox Props
|
|
|
|
|
|属性 | 说明 | 类型 | 默认值|
|
|
|
|
|
|----|-----|------|------|
|
|
|
|
|
|v-model|验证码字符串|String|-|
|
2018-11-19 18:59:56 +08:00
|
|
|
|maxlength|字符最大输入长度, 若为`-1`则不限制输入长度|Number|`4`|
|
2018-03-26 16:04:04 +08:00
|
|
|
|autofocus|是否直通聚焦拉起键盘, 对系统键盘不生效|Boolean|`false`|
|
|
|
|
|
|mask|是否掩码|Boolean|`false`|
|
2018-08-27 19:16:59 +08:00
|
|
|
|disabled|禁用输入|Boolean|`false`|
|
|
|
|
|
|justify|自动拉伸布局|Boolean|`false`|
|
2018-03-26 16:04:04 +08:00
|
|
|
|closable|点击输入框及键盘其他区域是否收起键盘|Boolean|`true`|
|
|
|
|
|
|ok-text|键盘确认键文案|String|`确认`|
|
|
|
|
|
|disorder|数字键盘是否乱序|Boolean|`false`|
|
|
|
|
|
|system|是否使用系统默认键盘|Boolean|`false`|
|
2019-12-26 10:44:23 +08:00
|
|
|
|is-view|是否内嵌在页面内展示，否则以弹层形式|Boolean|`false`|
|
2023-03-29 21:12:57 +08:00
|
|
|
|is-error-style|是否展示错误样式|Boolean|`false`|
|
2018-03-26 16:04:04 +08:00
|
|
|
|
|
|
|
|
#### Codebox Methods
|
|
|
|
|
|
|
|
|
|
##### focus()
|
|
|
|
|
聚焦输入
|
|
|
|
|
|
|
|
|
|
##### blur()
|
|
|
|
|
失焦隐藏键盘
|
|
|
|
|
|
|
|
|
|
#### Codebox Events
|
|
|
|
|
|
2018-06-21 11:34:49 +08:00
|
|
|
##### @submit(code)
|
2018-03-26 16:04:04 +08:00
|
|
|
用户提交输入内容事件
|
