NumberBox 步进器

该组件一般用于数量设置的场景。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	兼容中	兼容中	兼容中	兼容中

基本使用

通过v-model绑定value初始值，此值是双向绑定的，无需在回调中将返回的数值重新赋值给value。

<template>
  <tn-number-box v-model="value"></tn-number-box>
</template>

<script>
  export default {
    data() {
      return {
        value: 0
      }
    }
  }
</script>

限制输入范围

可以通过min和max来设置最小值和最大值。

<tn-number-box v-model="value" :min="0" :max="100"></tn-number-box>

设置步进值

可以通过step属性设置每次点击增加或者减少按钮变化的值，支持设置为小数。

说明：如果步进值是小数需要将positiveInteger的值设置为false。

<tn-number-box v-model="value" :min="0" :max="100" :positiveInteger="false" :step="1.1"></tn-number-box>

设置禁用状态

该组件有disabled和disabledInput两个禁用选项。

• disabled：全局禁用，此时将禁用输入和点击进行增减。
• disabledInput：禁止输入，但是可以通过按钮进行增减。

<tn-number-box v-model="value" :disabled="true"></tn-number-box>

API

Props

属性名	说明	类型	默认值	可选值
v-model	步进器的值	Number	1	-
index	用于区分多个步进器的事件	String|Number	-	-
backgroundColor	背景颜色	String	#E6E6E6	颜色的十六进制值，rgba(),rgb(),TuniaoUI内置的颜色类名
fontColor	字体颜色	String	-	颜色的十六进制值，rgba(),rgb(),TuniaoUI内置的颜色类名
fontSize	字体大小	Number	28	-
fontUnit	字体大小的单位	String	rpx	-
min	步进器最小值	Number	0	-
max	步进器最大值	Number	99999	-
step	步进值，每次加或者减的值，如果是小数，需要配置positiveInteger为false	Number	1	-
disabled	禁用步进器	Boolean	false	true
disabledInput	禁用步进器的输入	Boolean	false	true
inputWidth	输入框的宽度，单位rpx	Number	88	-
inputHeight	输入框的高度，单位rpx	Number	50	-
cursorSpacing	指定光标于键盘的距离，避免键盘遮挡输入框，单位rpx	Boolean	100	-
longPress	开启长按进行连续递增减	Boolean	true	false
longPressTime	长按触发时间间隔，单位ms	Number	250	-
positiveInteger	只允许输入正整数	Boolean	true	false

Slots

none

Event

事件名称	说明	回调参数
change	步进数值发生变化时触发	{value: 当前步进值，index: 当前步进器index标识}
blur	输入框失去焦点时触发	{value: 当前步进值，index: 当前步进器index标识}
minus	点击减少按钮时触发	{value: 当前步进值，index: 当前步进器index标识}
plus	点击增加按钮时触发	{value: 当前步进值，index: 当前步进器index标识}