uv-ui

# CodeInput 验证码输入

✈

组件名：uv-code-input

点击下载&安装 (opens new window)

该组件一般用于验证用户短信验证码的场景，也可以结合uv-ui的键盘组件 (opens new window)使用

注意：需要自定义键盘disabledKeyboard属性必须为true

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

# 基本使用

  • 通过mode参数模式，可取如下值：
  • box(默认) - 输入位置位一个方框
  • line - 底部显示一条横线
<template>
	<view>
		<uv-code-input v-model="value" @change="change" @finish="finish"></uv-code-input>
	</view>
</template>
<script>
	export default {
		data(){
			return {
				value: 12
			}
		},
		methods: {
			change(e) {
				console.log('内容改变，当前值为：' + e);
			},
			finish(e) {
				console.log('输入结束，当前值为：' + e);
			}
		}
	}
</script>

# 横线模式

  • 通过mode="line"可设置显示为横线模式
<uv-code-input mode="line" :hairline="true"></uv-code-input>

# 设置长度

  • 通过maxlength参数配置可输入的方框个数，如6位验证码，该值设置为6即可
<uv-code-input :maxlength="6"></uv-code-input>

# 横线间距

  • 通过space可设置间距
<uv-code-input :space="2" ></uv-code-input>

# 细边框

  • 通过hairline可设置细边框
<uv-code-input mode="box" :space="0" :maxlength="4" hairline></uv-code-input>

# 调整颜色

  • 通过color和borderColor可设置颜色
<uv-code-input hairline color="#f56c6c" borderColor="#f56c6c"></uv-code-input>

# 用"●"替代输入内容

dot参数配置后，输入内容将不可见，用点替代，事件回调中会返回真实值

<uv-code-input mode="box" dot></uv-code-input>

# 是否自动获取焦点

如果需要一打开页面，就自动弹出键盘获取焦点，请配置focus值为true，否则需要用户手动点击输入区域才能唤起键盘

<uv-code-input :focus="true"></uv-code-input>

# 禁止唤起系统键盘

uv-ui有键盘组件，如果您想结合键盘组件进行自定义的输入效果，就需要设置disabled-keyboard为true，来保证点击 输入框时不会触发系统自带的键盘，否则会造成冲突。

# 事件回调

  • 每当输入内容发生改变，会回调一个change事件，内容为当前输入的字符串，如"395"
  • 当输入的内容长度(字符个数)达到maxlength值后，会触发finish事件，同时也会触发change事件
<template>
	<view>
		<uv-code-input @change="change" @finish="finish"></uv-code-input>
	</view>
</template>
<script>
	export default {
		methods: {
			change(e) {
				console.log('内容改变，当前值为：' + e);
			},
			finish(e) {
				console.log('输入结束，当前值为：' + e);
			},
		}
	}
</script>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# CodeInput Props

参数 说明 类型 默认值 可选值
value / v-model 预置值 String | Number - -
adjustPosition 键盘弹起时，是否自动上推页面 Boolean true true | false
maxlength 输入字符个数 String | Number 6 -
dot 是否用圆点填充 Boolean false true | false
mode 模式选择，见上方"基本使用"说明 String box box | line
hairline 是否细边框 Boolean false true | false
space 字符间的距离 String | Number 10 -
focus 是否自动获取焦点 Boolean false true | false
bold 字体和输入横线是否加粗 Boolean false true | false
color 字体颜色 String #606266 -
fontSize 字体大小，单位rpx String | Number 18 -
size 输入框的大小，宽等于高 String | Number 35 -
disabledKeyboard 禁止点击输入框唤起系统键盘，自定义键盘改值必须为true Boolean false true | false
borderColor 边框和线条颜色 String #c9cacc -
disabledDot 是否禁止输入"."符号 Boolean true true | false

# CodeInput Events

事件名 说明 回调参数
@change 输入内容发生改变时触发，具体见上方说明 value：当前输入的值
@finish 输入字符个数达maxlength值时触发，见上方说明 value：当前输入的值

← ReadMore 展开阅读更多 →