numberbox

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

组件结构

  1. <template>
  2. <viewclass="tui-numberbox-class tui-numberbox">
  3. <viewclass="tui-numbox-icon tui-icon-reduce " :class="[disabled || min>=value?'tui-disabled':'']" @tap="reduce"
  4. :style="{color:iconcolor,fontSize:px(iconsize)}"></view>
  5. <inputtype="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. <viewclass="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. exportdefault{
  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. returnthis.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. }elseif(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. }elseif(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行,下载源码查看

modal rate