numberbox

NumberBox 数字框:可设置步长，支持浮点数，支持调整样式

组件结构

  1. <template>
  2.     <view class="tui-numberbox-class tui-numberbox">
  3.         <view class="tui-numbox-icon tui-icon-reduce " :class="[disabled || min>=value?'tui-disabled':'']" @tap="reduce"
  4.          :style="{color:iconcolor,fontSize:px(iconsize)}"></view>
  5.         <input type="number" v-model="val" :disabled="disabled" @blur="blur" class="tui-num-input" :style="{color:color,fontSize:px(iconsize),background:bgcolor,height:px(height),width:px(width)}" />
  6.         <view class="tui-numbox-icon tui-icon-plus" :class="[disabled || value>=max?'tui-disabled':'']" @tap="plus" :style="{color:iconcolor,fontSize:px(iconsize)}"></view>
  7.     </view>
  8. </template>

组件脚本

  1. <script>
  2.     export default {
  3.         name: "tuiNumberbox",
  4.         props: {
  5.             value: {
  6.                 type: Number,
  7.                 default: 1
  8.             },
  9.             //最小值
  10.             min: {
  11.                 type: Number,
  12.                 default: 0
  13.             },
  14.             //最大值
  15.             max: {
  16.                 type: Number,
  17.                 default: 100
  18.             },
  19.             //迈步大小 1 1.1 10...
  20.             step: {
  21.                 type: Number,
  22.                 default: 1
  23.             },
  24.             //是否禁用操作
  25.             disabled: {
  26.                 type: Boolean,
  27.                 default: false
  28.             },
  29.             //加减图标大小 rpx
  30.             iconsize: {
  31.                 type: Number,
  32.                 default: 24
  33.             },
  34.             iconcolor: {
  35.                 type: String,
  36.                 default: "#333"
  37.             },
  38.             //input 高度
  39.             height: {
  40.                 type: Number,
  41.                 default: 50
  42.             },
  43.             //input 宽度
  44.             width: {
  45.                 type: Number,
  46.                 default: 90
  47.             },
  48.             //input 背景颜色
  49.             bgcolor: {
  50.                 type: String,
  51.                 default: "#f2f2f2"
  52.             },
  53.             //input 字体颜色
  54.             color: {
  55.                 type: String,
  56.                 default: "#333"
  57.             }
  58.         },
  59.         computed: {
  60.             val() {
  61.                 return this.value 
  62.             }
  63.         },
  64.         data() {
  65.             return {
  67.             };
  68.         },
  69.         methods: {
  70.             px(num) {
  71.                 return uni.upx2px(num) + "px"
  72.             },
  73.             getScale() {
  74.                 let scale = 1;
  75.                 //浮点型
  76.                 if (!Number.isInteger(this.step)) {
  77.                     scale = Math.pow(10, (this.step + '').split('.')[1].length)
  78.                 }
  79.                 return scale;
  80.             },
  81.             calcNum: function(type) {
  82.                 if (this.disabled) {
  83.                     return
  84.                 }
  85.                 const scale = this.getScale()
  86.                 let num = this.value * scale
  87.                 let step = this.step * scale
  88.                 if (type === 'reduce') {
  89.                     num -= step
  90.                 } else if (type === 'plus') {
  91.                     num += step
  92.                 }
  93.                 let value = num / scale
  94.                 if (value < this.min || value > this.max) {
  95.                     return
  96.                 }
  98.                 this.handleChange(value, type)
  99.             },
  100.             plus: function() {
  101.                 this.calcNum("plus")
  102.             },
  103.             reduce: function() {
  104.                 this.calcNum("reduce")
  105.             },
  106.             blur: function(e) {
  107.                 let value = e.detail.value
  108.                 if (value) {
  109.                     value = +value
  110.                     if (value > this.max) {
  111.                         value = this.max
  112.                     } else if (value < this.min) {
  113.                         value = this.min
  114.                     }
  115.                 } else {
  116.                     value = this.min
  117.                 }
  118.                 this.handleChange(value, "blur")
  119.             },
  120.             handleChange(value, type) {
  121.                 if (this.disabled) {
  122.                     return
  123.                 }
  124.                 this.$emit('change', {
  125.                     value: value,
  126.                     type: type
  127.                 })
  128.             }
  129.         }
  130.     }
  131. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "value" : 数字框值,类型:"Number",默认值:1
     "min" : 最小值,类型:"Number",默认值:0
     "max" : 最大值 ,类型:"Number",默认值:100
     "step" : 迈步大小 1 1.1 10...,类型:"Number",默认值:1
     "disabled" : 是否禁用操作,类型:"Boolean",默认值:false
     "iconsize" : 加减图标大小 upx,类型:"Number",默认值:24
     "iconcolor" : 图标颜色,类型:"String",默认值:"#333"
     "height" : input 高度,类型:"Number",默认值:50
     "width" : input 宽度,类型:"Number",默认值:90
     "bgcolor" :input 背景颜色,类型:"Boolean",默认值:false
     "color" : input 字体颜色,类型:"Boolean",默认值:false

 methods:
   "px":upx转px
   "getScale":获取缩放倍数 ，（1.1=>10,1.11=>100）
   "calcNum":计算input值
   "plus":加号事件
   "reduce":减号事件
   "blur":失去焦点执行的事件
   "handleChange":input数值变化事件

示例

... 此处省略n行,下载源码查看

← modal rate →