# 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>
1
改变加减号颜色

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

<fui-input-number signColor="#FFB703"></fui-input-number>
1
设置最小值和最大值

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

<fui-input-number :min="2" :max="9"></fui-input-number>
1
设置步长

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

<fui-input-number :step="0.1"></fui-input-number>
1
使用v-model

双向绑定。

<fui-input-number v-model="val"></fui-input-number>
1
自定义加减号

通过 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
}

示例预览

# 示例代码地址

FirstUIInputNumber 数字输入框
Last Updated: 9/2/2024, 11:06:12 PM