# NumberBox

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

# 组件结构

<template>
	<view class="tui-numberbox">
		<view class="tui-numbox-icon tui-icon-reduce " :class="[disabled || min>=value?'tui-disabled':'']" @tap="reduce"
		 :style="{color:iconColor,fontSize:iconSize+'rpx'}"></view>
		<input type="number" v-model="inputValue" :disabled="disabled" @blur="blur" class="tui-num-input" :style="{color:color,fontSize:size+'rpx',backgroundColor:backgroundColor,height:height+'rpx',width:width+'rpx'}" />
		<view class="tui-numbox-icon tui-icon-plus" :class="[disabled || value>=max?'tui-disabled':'']" @tap="plus" :style="{color:iconColor,fontSize:iconSize+'rpx'}"></view>
	</view>
</template>

# 组件脚本

<script>
	export default {
		name: "tuiNumberbox",
		
		...省略n行
			
	}
</script>

# 组件样式

... 此处省略n行

# 脚本说明

# 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

# methods

名称 描述
@change input数值变化事件

# 示例

# H5预览地址

https://www.thorui.cn/h5/#/pages/extend/numberbox/numberbox

# H5二维码

# 小程序二维码