# tui-numberbox 数字框开源组件

介绍

可设置步长，支持浮点数，支持调整样式（可单独设置）。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiNumberbox from "@/components/thorui/tui-numberbox/tui-numberbox.vue"
export default {
	components:{
		tuiNumberbox
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	✓	✓	✓	✓	✓	✓	✓

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-numberbox": "/components/thorui/tui-numberbox/tui-numberbox"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础用法

通过 value 属性控制input框数值显示，当数值发生变化时会触发 change 事件。

注：触发change事件时需同步更新事件返回的value值

<!--uni-app-->
<tui-numberbox :value="value" @change="change"></tui-numberbox>

// data 数据 及 方法
export default {
  data() {
  	return {
  		value:1
  	}
  },
  methods: {
  	change: function(e) {
  		this.value = e.value
  	}
  }
}

<!--微信小程序-->
<tui-numberbox value="{{value}}" bindchange="change"></tui-numberbox>

// data 数据 及 方法
Page({
  data: {
    value:1
  },
  change: function (e) {
      this.setData({
        value:e.detail.value
      })
  }
})

// Make sure to add code blocks to your code group

设置最小值和最大值

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

注：触发change事件时需同步更新事件返回的value值

<!--uni-app-->
<tui-numberbox :value="value" :min="1" :max="10" @change="change"></tui-numberbox>

// data 数据 及 方法
export default {
 data() {
 	return {
 		value:1
 	}
 },
 methods: {
 	change: function(e) {
 		this.value = e.value
 	}
 }
}

<!--微信小程序-->
<tui-numberbox value="{{value}}" min="{{1}}" max="{{10}}" bindchange="change"></tui-numberbox>

// data 数据 及 方法
Page({
  data: {
    value:1
  },
  change: function (e) {
      this.setData({
        value:e.detail.value
      })
  }
})

// Make sure to add code blocks to your code group

设置步长

通过 step 属性设置步长。

<!--uni-app-->
<tui-numberbox :step="0.1"></tui-numberbox>
<tui-numberbox :step="10"></tui-numberbox>

<!--微信小程序-->
<tui-numberbox step="{{0.1}}"></tui-numberbox>
<tui-numberbox step="{{10}}"></tui-numberbox>

// 完整使用请参考上方示例

禁用状态

通过 disabled 属性设置禁用状态。

<!--uni-app-->
<tui-numberbox disabled></tui-numberbox>

<!--微信小程序-->
<tui-numberbox disabled></tui-numberbox>

// 完整使用请参考上方示例

# Slots

插槽名称	插槽说明
-	-

# Props

属性名	类型	说明	默认值
value	Number, String	数字框值	1
min	Number	最小值	1
max	Number	最大值	99
step	Number	迈步大小	1
disabled	Boolean	是否禁用操作	false
iconBgColor V2.0+	String	加减号背景色	transparent
radius V2.0+	Boolean	加减号圆角值	50%
iconSize	Number	加减图标大小	26
iconColor	String	图标颜色	#666666
height	Number	input 高度	42
width	Number	input 宽度	80
size	Number	input 字体大小	28
backgroundColor	String	input 背景颜色	#F5F5F5
color	String	input 字体颜色	#333
index	Number, String	索引值，列表中使用	0
custom	Number, String	自定义参数	0

# Events

注：uni-app端绑定事件使用@前缀，如@change；微信小程序原生使用bind前缀，如bindchange

事件名	说明	回调参数
change	input数值变化事件	{ value: 数值, type: 触发类型，plus(加)/reduce(减)/blur(失焦), index: 索引值，列表中使用, custom: 自定义参数 }