# tui-numberbox 数字框

介绍

可设置步长,支持浮点数,支持调整样式(可单独设置)。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

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

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

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

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

# 代码演示

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

基础用法

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

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

<!--微信小程序-->
<tui-numberbox value="{{value}}" bindchange="change"></tui-numberbox>
//data 数据
{
	value:1
}

/*methods*/

//uni-app
change: function(e) {
	this.value = e.value
}

//微信小程序
change: function (e) {
    this.setData({
      value:e.detail.value
    })
  }

设置最小值和最大值

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

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

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

通过 step 属性设置步长。

<!--uni-app-->
<tui-numberbox :value="value" :step="0.1" @change="change"></tui-numberbox>
<tui-numberbox :value="value2" :step="10" @change="change2"></tui-numberbox>

<!--微信小程序-->
<tui-numberbox value="{{value}}" step="{{0.1}}" bindchange="change"></tui-numberbox>
<tui-numberbox value="{{value2}}" step="{{10}}" bindchange="change2"></tui-numberbox>
禁用状态

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

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

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

# Slots

none

# Props

参数 类型 说明 默认值
value Number 数字框值 1
min Number 最小值 1
max Number 最大值 99
step Number 迈步大小 1
disabled Boolean 是否禁用操作 false
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

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

# 预览

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码