# InputNumber 数字输入框

概述

InputNumber 数字输入框，该组件多用于购物车加减商品等场景。

# 支持平台

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

# 引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiInputNumber from "@/components/firstui/fui-input-number/fui-input-number.vue"
export default {
	components:{
		fuiInputNumber
	}
}

1
2
3
4
5
6

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看快速上手。

如果不了解easycom，可先查看官网文档 (opens new window)。

# 代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 change 事件获取输入框的值。

<fui-input-number @change="change"></fui-input-number>

改变加减号颜色

通过 signColor 属性修改加减号颜色。

<fui-input-number signColor="#FFB703"></fui-input-number>

设置最小值和最大值

通过 min 属性设置最小值，max 属性设置最大值。

<fui-input-number :min="2" :max="9"></fui-input-number>

设置步长

通过 step 属性设置步长（步长0.1)。

<fui-input-number :step="0.1"></fui-input-number>

使用v-model

双向绑定。

<fui-input-number v-model="val"></fui-input-number>

自定义加减号

通过 custom 属性设置是否自定义加减号，为true则去除默认加减号，使用插槽自定义。

<fui-input-number custom backgroundColor="#FFF" :size="30" :width="60" margin="0">
	<fui-icon name="minussign" :size="48" color="#FFB703"></fui-icon>
	<template v-slot:plus>
		<fui-icon name="plussign-fill" :size="48" color="#FFB703"></fui-icon>
	</template>
</fui-input-number>

1
2
3
4
5
6

# Slots

插槽名称	说明
default	左侧内容，自定义减号
plus	右侧内容，自定义加号

# Props

属性名	类型	说明	默认值	平台差异说明
value	Number, String	输入框值，vue2使用（vue3请忽略）	1	-
modelValue	Number, String	输入框值，vue3使用（vue2使用value）	1	支持情况请参考uni-app官方 (opens new window)
valueEmit V2.5.0+	Boolean	初始化以及页面改变value值时是否触发change等事件	true	-
type V1.7.0+	String	输入框类型，可选值：number、text（主要用于输入负号小数点）	number	-
min	Number	最小值，支持负数	1	-
max	Number	最大值	99	-
step	Number	每次点击改变的间隔大小	1	-
disabled	Boolean	是否禁用操作	false	-
signWidth	Number, String	加减号宽度，单位rpx	24	-
height	Number, String	输入框高度，单位rpx	40	-
width	Number, String	输入框宽度，单位rpx	80	-
radius	Number, String	输入框圆角，单位rpx	8	-
size	Number, String	输入框字体大小，单位rpx	28	-
backgroundColor	String	输入框背景颜色	#EEEEEE	-
color	String	输入框字体颜色	#181818	-
margin	Number, String	输入框margin-left，margin-right值，单位rpx	16	-
custom	Boolean	是否自定义加减号，为true则去除默认加减号，使用插槽自定义	false	-
index	Number, String	索引值，列表中使用	0	-
params	Number, String	自定义参数	0	-

# Events

事件名	说明	回调参数
@change	输入框值改变时触发	{ value:输入框值, index:索引值, params:自定义参数 }
@input vue2	用于组件双向绑定，使用v-model指令即可	value
@update:modelValue vue3	用于组件双向绑定，使用v-model指令即可	modelValue
@blur	输入框失去焦点时触发	{ evant.detail.value }

示例预览

# 示例代码地址

InputNumber 数字输入框

← Input 输入框 Label 标签 →