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

基本使用

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

<template>
	<un-code-input v-model="value"></un-code-input>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	
	const value = ref('')
</script>

横线模式

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

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

<script setup lang="ts">
	import { ref } from 'vue'
	
	const value2 = ref('')
</script>

设置长度

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

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

<script setup lang="ts">
	import { ref } from 'vue'
	
	const value3 = ref('')
</script>

字符间距

• 通过space可设置字符之间的间距

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

<script setup lang="ts">
	import { ref } from 'vue'
	
	const value4 = ref('')
</script>

细边框

• 通过hairline可设置细边框

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

<script setup lang="ts">
	import { ref } from 'vue'
	
	const value5 = ref('')
</script>

调整颜色

• 通过color和borderColor可设置颜色

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

<script setup lang="ts">
	import { ref } from 'vue'
	
	const value6 = ref('')
</script>

设置背景颜色

• 通过bgColor可设置背景颜色

<template>
	<un-code-input v-model="value6" bgColor="#f3f3f3" borderColor="none"></un-code-input>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	
	const value6 = ref('')
</script>

用"●"替代输入内容

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

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

<script setup lang="ts">
	import { ref } from 'vue'
	
	const value5 = ref('')
</script>

是否自动获取焦点

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

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

<script setup lang="ts">
	import { ref } from 'vue'
	
	const value4 = ref('')
</script>

禁止唤起系统键盘

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

事件回调

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

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

<script setup lang="ts">
	import { ref } from 'vue'
	
	const value = ref('')
	
	const change = (e: string) => {
		console.log('内容改变，当前值为：' + e)
	}
	
	const finish = (e: string) => {
		console.log('输入结束，当前值为：' + e)
	}
</script>

输入框的类型

输入框的类型可通过配置type来设置：

• text-文本输入键盘
• number-数字输入键盘，app-vue下可以输入浮点数，app-nvue和小程序平台下只能输入整数

API

Props

参数	说明	类型	默认值
type	输入框类型，见上方说明	Enum	number
confirmType	设置右下角按钮的文字	Enum	done
confirmHold	点击键盘右下角按钮时是否保持键盘不收起，H5无效	Boolean	false
adjustPosition	键盘弹起时，是否自动上推页面	Boolean	true
maxlength	输入字符个数	String | Number	6
dot	是否用圆点填充	Boolean	false
mode	模式选择，见上方"基本使用"说明	Enum	box
hairline	是否细边框	Boolean	false
space	字符间的距离	String | Number	10
v-model	双向绑定的值	String | Number	-
focus	是否自动获取焦点	Boolean	true
bold	字体和输入横线是否加粗	Boolean	false
color	字体颜色	String	#606266
fontSize	字体大小，单位px	String | Number	18
size	输入框的大小，宽等于高	String | Number	35
disabledKeyboard	禁止点击输入框唤起系统键盘	Boolean	false
borderColor	边框和线条颜色	String	#c9cacc
disabledDot	是否禁止输入"."符号	Boolean	true
bgColor	背景颜色	String	-
round	设置圆角值	String | Number	4px

Events

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

Scss 变量

关于组件 SCSS 变量的用法，请参考 组件 SCSS 变量用法。

变量名	默认值	说明
$un-code-input-item-box-border	1px solid $border-color	盒子模式下的边框样式
$un-code-input-item-text-font-size	$text-base	输入文本的字体大小
$un-code-input-item-text-color	$text-color	输入文本的颜色
$un-code-input-item-dot-width	7px	圆点填充的宽度
$un-code-input-item-dot-height	7px	圆点填充的高度
$un-code-input-item-dot-radius	$radius-circle	圆点填充的圆角
$un-code-input-item-dot-bg-color	$text-color	圆点填充的背景颜色
$un-code-input-item-line-height	4px	横线模式下的横线高度
$un-code-input-item-line-radius	$radius-circle	横线模式下的横线圆角
$un-code-input-item-line-width	40px	横线模式下的横线宽度
$un-code-input-item-line-bg-color	$bg-color	横线模式下的横线背景颜色
$un-code-input-item-cursor-width	1px	光标宽度
$un-code-input-item-cursor-height	40%	光标高度
$un-code-input-item-cursor-radius	$radius-circle	光标圆角
$un-code-input-item-cursor-bg-color	$text-color	光标背景颜色
$un-code-input-item-cursor-animation-duration	1s	光标动画持续时间
$un-code-input-input-left	-750rpx	输入框定位
$un-code-input-input-width	1500rpx	输入框宽度