ThorUI文档

# 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 事件。

<!--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, 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

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

# 预览

# 线上程序扫码预览

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

← tui-rate 评分 →