# CodeInput 校验码输入
数字录入组件,一般用于验证用户短信验证码的场景
# 平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | √ |
# 示例
# 基础用法
可通过v-model | value：设定输入项的值
<template>
<pi-code-input v-model="baseUsed" :length="4" />
</template>
<script>
export default {
data() {
return {
baseUsed: '314'
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 输入项长度
可通过length：设定输入项的长度
<template>
<pi-code-input v-model="length" :length="6" />
</template>
<script>
export default {
data() {
return {
length: '314159'
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 均分布局
可通过stretch：平分父容器的宽度
<template>
<pi-code-input v-model="stretch" :length="4" stretch />
</template>
<script>
export default {
data() {
return {
stretch: ''
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 输入项样式
可通过设置item-style，控制每一项输入框的样式
<template>
<pi-code-input
v-model="styles"
:item-style="{ borderRadius: '25%', borderColor: '#ff508a', color: '#ff508a' }"
/>
</template>
<script>
export default {
data() {
return {
styles: ''
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 已填输入项样式
可通过设置fill-style，控制每一项输入框的已填样式
<template>
<pi-code-input
v-model="fillStyles"
:length="4"
:fill-style="{
fontWeight: '700',
borderColor: '#ff508a',
color: '#000'
}"
/>
</template>
<script>
export default {
data() {
return {
fillStyles: ''
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 自动拉起键盘输入
可通过设置auto-focus，当组件渲染完毕，自动拉起键盘输入
<template>
<pi-code-input v-model="autoFocus" :length="4" auto-focus />
</template>
<script>
export default {
data() {
return {
autoFocus: ''
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 验证码格式化
可通过设置codeFormat，控制验证码的显示
<template>
<pi-code-input v-model="codeFormat" :length="4" code-format="@" />
</template>
<script>
export default {
data() {
return {
codeFormat: '9'
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 密码样式
可通过设置item slot，自定义验证码显示内容
<template>
<pi-code-input v-model="password" :length="4">
<template slot="item" slot-scope="{ item }">{{ item ? '*' : '' }}</template>
</pi-code-input>
</template>
<script>
export default {
data() {
return {
password: '12'
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Props
| 名称 | 描述 | 类型 | 必选 | 默认值 |
|---|---|---|---|---|
| value | 初始值，接收一个长度为length的内容 | String | Number | false | - |
| customStyle | 自定义样式，对象形式 | Object | false | - |
| customClass | 自定义样式类，字符串形式 | String | false | - |
| itemStyle | 每项验证码样式，对象形式 | Object | false | - |
| fillStyle | 已填项验证码样式，对象形式 | Object | false | - |
| length | 长度 | String | Number | false | 4 |
| autoFocus | 自动拉起键盘 | Boolean | false | false |
| autoFocusDelay | 自动拉起键盘延时 | String | Number | false | 350 |
| stretch | 每项验证码是否均分宽度 | Boolean | false | false |
# Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| end | 当输入的数字位数与length属性相等时触发 | string 输入的数字 |