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 {
  66. };
  67. },
  68. methods: {
  69. px(num) {
  70. return uni.upx2px(num) + "px"
  71. },
  72. getScale() {
  73. let scale = 1;
  74. //浮点型
  75. if (!Number.isInteger(this.step)) {
  76. scale = Math.pow(10, (this.step + '').split('.')[1].length)
  77. }
  78. return scale;
  79. },
  80. calcNum: function(type) {
  81. if (this.disabled) {
  82. return
  83. }
  84. const scale = this.getScale()
  85. let num = this.value * scale
  86. let step = this.step * scale
  87. if (type === 'reduce') {
  88. num -= step
  89. } else if (type === 'plus') {
  90. num += step
  91. }
  92. let value = num / scale
  93. if (value < this.min || value > this.max) {
  94. return
  95. }
  96. this.handleChange(value, type)
  97. },
  98. plus: function() {
  99. this.calcNum("plus")
  100. },
  101. reduce: function() {
  102. this.calcNum("reduce")
  103. },
  104. blur: function(e) {
  105. let value = e.detail.value
  106. if (value) {
  107. value = +value
  108. if (value > this.max) {
  109. value = this.max
  110. } else if (value < this.min) {
  111. value = this.min
  112. }
  113. } else {
  114. value = this.min
  115. }
  116. this.handleChange(value, "blur")
  117. },
  118. handleChange(value, type) {
  119. if (this.disabled) {
  120. return
  121. }
  122. this.$emit('change', {
  123. value: value,
  124. type: type
  125. })
  126. }
  127. }
  128. }
  129. </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行,下载源码查看