InputNumber 数字输入框

概述

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

引入

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

第一种：在页面json文件中引入

{
  "navigationBarTitleText": "数字输入框",
  "usingComponents": {
    "fui-input-number": "/components/firstui/fui-input-number/fui-input-number"
  }
}

第二种：在根目录app.json文件中全局引入

"usingComponents": {
  "fui-input-number": "components/firstui/fui-input-number/fui-input-number"
}

代码演示

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

基础使用

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

<fui-input-number bindchange="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>

使用model:value

双向绑定。

<fui-input-number model:value="{{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>
      <fui-icon slot="plus" name="plussign-fill" size="{{48}}" color="#FFB703"></fui-icon>
 </fui-input-number>

Slots

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

Props

属性名	类型	说明	默认值	其他说明
value	Number, String	输入框值	1	-
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

事件名	说明	回调参数
bind:change	输入框值改变时触发	event.detail = {   value:输入框值,   index:索引值,   params:自定义参数 }
bind:blur	失去焦点时触发	event.detail

示例预览