NumberInput 数字输入

专用于输入数字。每个输入框只允许输入一个字符，主要用于验证码、密码输入框等。

导入

import NumberInput from '@/components/form/NumberInput.vue';

使用方法

基础用法

最简单的使用方式，默认显示6位数字输入框。

<template>
  <NumberInput v-model="value1" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import NumberInput from '@/components/form/NumberInput.vue';

const value1 = ref('');
</script>

使用 NumberKeyBoard 输入键盘

不使用系统键盘，使用内置的 NumberKeyBoard 键盘。

<template>
  <NumberInput v-model="value6" :useSystemInput="false" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import NumberInput from '@/components/form/NumberInput.vue';

const value6 = ref('');
</script>

自定义长度

设置自定义的数字位数。

<template>
  <NumberInput 
    v-model="value2"
    :numberCount="8"
    :boxStyle="{
      paddingHorizontal: 0,
    }"
    autoSize 
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import NumberInput from '@/components/form/NumberInput.vue';

const value2 = ref('');
</script>

格子间距

设置输入框格子之间的间距。

<template>
  <NumberInput v-model="value3" :numberCount="4" :gutter="20" autoSize />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import NumberInput from '@/components/form/NumberInput.vue';

const value3 = ref('');
</script>

下划线边框

使用下划线样式的边框。

<template>
  <NumberInput
    v-model="value4"
    :numberCount="4"
    :borderWidth="4"
    borderColor="border.default"
    borderType="underline"
    activeBorderColor="primary"
    :gutter="10"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import NumberInput from '@/components/form/NumberInput.vue';

const value4 = ref('');
</script>

密码输入

设置为密码输入模式，显示为圆点。

<template>
  <NumberInput v-model="value5" isPassword info="密码为 6 位数字" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import NumberInput from '@/components/form/NumberInput.vue';

const value5 = ref('');
</script>

API 参考

Props

名称	说明	类型	必填	默认值
modelValue	数值	string	是	-
errorMessage	底部错误提示文案，为空时不展示	string	否	-
numberCount	数字位数	number	否	6
isPassword	是否是密码	boolean	否	false
startFocus	是否在组件初始化时激活键盘	boolean	否	false
useSystemInput	使用系统输入键盘，否则使用 NumberKeyBoard 作为输入键盘	boolean	否	true
info	输入框下方文字提示	string	否	-
gutter	输入框格子之间的间距	number	否	4
autoSize	是否自动调整宽度	boolean	否	false
borderType	格子的边框样式	'underline' | 'box'	否	'box'
borderColor	格子的边框颜色	string	否	'border.default'
borderWidth	格子的边框宽度	number	否	4
activeBorderColor	已输入格子的边框颜色	string	否	'primary'
boxStyle	格子样式	ViewStyle	否	-
disableKeyPad	是否禁用点击打开键盘	boolean	否	false
showCursur	是否显示输入闪烁光标	boolean	否	true
finishHideKeyPad	是否在输入完成后自动收起键盘	boolean	否	true
textStyle	文字样式	TextStyle	否	-
innerStyle	外层样式	ViewStyle	否	-

Events

名称	说明	参数
update:modelValue	文字更改回调	string
enterFinish	当输入完成（全部位数都已经输入）时返回事件	string

主题变量

变量名	类型	默认值	说明
NumberInputBorderType	string	'box'	默认边框类型
NumberInputBorderWidth	number	4	默认边框宽度
NumberInputGutter	number	4	默认格子间距
NumberInputBorderColor	string	'border.default'	默认边框颜色
NumberInputActiveBorderColor	string	'primary'	已输入格子的边框颜色
NumberInputInfoMarginTop	number	10	提示文字上边距
NumberInputInfoColor	string	'text.second'	提示文字颜色
NumberInputErrorMessageMarginTop	number	10	错误提示文字上边距
NumberInputErrorMessageColor	string	'danger'	错误提示文字颜色