CodeInput 验证码输入 ¶

该组件一般用于验证用户短信验证码的场景，也可以结合uView的键盘组件使用

平台差异说明 ¶

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

基本使用 ¶

通过mode参数模式，可取如下值：
box(默认)-输入位置位一个方框
bottomLine-底部显示一条横线
middleLine-中部显示一条横线

html

<up-code-input v-model="value"></up-code-input>

横线模式 ¶

通过mode="line"可设置显示为横线模式

html

<up-code-input v-model="value2" mode="line"></up-code-input>

设置长度 ¶

通过maxlength参数配置可输入的方框个数，如6位验证码，该值设置为6即可

html

<up-code-input v-model="value3" :maxlength="6"></up-code-input>

横线间距 ¶

通过space可设置显示为横线模式

html

<up-code-input v-model="value4" :space="0" ></up-code-input>

细边框 ¶

通过hairline可设置细边框

html

<up-code-input v-model="value5" mode="box" :space="0" :maxlength="4" hairline></up-code-input>

调整颜色 ¶

通过color和borderColor可设置颜色

html

<up-code-input v-model="value6" hairline color="#f56c6c" borderColor="#f56c6c"></up-code-input>

用"●"替代输入内容 ¶

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

html

<up-code-input v-model="value5" mode="box" dot></up-code-input>

是否自动获取焦点 ¶

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

html

<up-code-input v-model="value4" :focus="true"></up-code-input>

禁止唤起系统键盘 ¶

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

事件回调 ¶

每当输入内容发生改变，会回调一个change事件，内容为当前输入的字符串，如"395"
当输入的内容长度(字符个数)达到maxlength值后，会触发finish事件，同时也会触发change事件

html

<template>
	<view>
		<up-code-input @change="change" @finish="finish"></up-code-input>
	</view>
</template>

<script>
	export default {
		methods: {
			change(e) {
				console.log('内容改变，当前值为：' + e);
			},
			finish(e) {
				console.log('输入结束，当前值为：' + e);
			},
		}
	}
</script>

此页面源代码地址 ¶

页面源码地址

github

gitee

API ¶

Props ¶

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

Events ¶

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