# InputNumber 数字输入框

概述

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

# 支持平台

目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。

安卓系统版本	安卓uni-app	安卓uniapp-x	iOS系统版本	iOS uniapp	iOS uniapp-x	小程序	H5/Web
5.0	×	✓	9.0	×	×	×	✓

# 引入

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

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

import fuiInputNumber from "@/components/firstui/fui-input-number/fui-input-number.uvue"
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>

import { FuiInputNumberChangeParam } from '@/components/firstui/fui-types/index.uts'
export default {
	data() {
		return {
			inputVal: 1
		}
	},
	methods: {
		change(e : FuiInputNumberChangeParam) {
			if (e.value != this.inputVal) {
				this.inputVal = e.value
			}
		}
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

改变加减号颜色

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

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

设置最小值和最大值

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

<fui-input-number :min="1" :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>

export default {
	data() {
		return {
			val: 1
		}
	}
}

1
2
3
4
5
6
7

自定义加减号

通过插槽自定义。

<fui-input-number 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

属性名	类型	说明	默认值	平台差异说明
modelValue	Number, String	输入框值	1	-
type	String	输入框类型，可选值：number、text（主要用于输入负号小数点）	number	-
min	Number	最小值，支持负数	1	-
max	Number	最大值	99	-
step	Number	每次点击改变的间隔大小	1	-
disabled	Boolean	是否禁用操作	false	-
signWidth	Number	加减号宽度，单位rpx	24	-
height	Number	输入框高度，单位rpx	40	-
width	Number	输入框宽度，单位rpx	80	-
radius	Number	输入框圆角，单位rpx	8	-
size	Number	输入框字体大小，单位rpx	28	-
backgroundColor	String	输入框背景颜色	#EEEEEE	-
color	String	输入框字体颜色	#181818	-
margin	Number	输入框margin-left，margin-right值，单位rpx	16	-
custom	Boolean	是否自定义加减号，为true则去除默认加减号，使用插槽自定义	false	-
index	Number	索引值，列表中使用	0	-
param	String	自定义参数	0	-

# Events

事件名	类型	说明	回调参数
@change	(event: FuiInputNumberChangeParam) => void	数字输入框值改变时触发	FuiInputNumberChangeParam
@input	(event: number) => void	数字输入框值改变时触发	number：值
@blur	(event: UniInputBlurEvent) => void	数字输入框失去焦点时触发	UniInputBlurEvent
@update:modelValue	(event: number) => void	输入框值改变时触发，用于双向绑定	number：值

# FuiInputNumberChangeParam

/**
* fui-input-number 数字输入框组件 @change 事件 回调参数类型
* @description this.$emit('change',FuiInputNumberChangeParam)
* @param {number} value {number} 数字文本内容
* @param {number} index {number} 索引值，列表中使用
* @param {string} param {string} 自定义参数 
*/
export type FuiInputNumberChangeParam = {
	value : number;
	index : number;
	param : string;
}

/*页面引入*/
import { FuiInputNumberChangeParam } from '@/components/firstui/fui-types/index.uts'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# UniInputBlurEvent

详见 (opens new window)

示例预览

# 示例代码地址

InputNumber 数字输入框

← Input 输入框 Label 标签 →