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二维码

小程序二维码