uni-numbers-box.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <template>
  2. <view class="uni-numbox">
  3. <view @click="_calcValue('minus')" class="uni-numbox__minus">
  4. <text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }">-</text>
  5. </view>
  6. <input :disabled="disabled" @blur="_onBlur" class="uni-numbox__value" type="number" v-model="inputValue" />
  7. <view @click="_calcValue('plus')" class="uni-numbox__plus">
  8. <text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }">+</text>
  9. </view>
  10. </view>
  11. </template>
  12. <script>
  13. export default {
  14. name: "UniNumbersBox",
  15. props: {
  16. index:{
  17. type: String,
  18. default: ''
  19. },
  20. value: {
  21. type: [Number, String],
  22. default: 1
  23. },
  24. min: {
  25. type: Number,
  26. default: 0
  27. },
  28. max: {
  29. type: Number,
  30. default: 100
  31. },
  32. step: {
  33. type: Number,
  34. default: 1
  35. },
  36. disabled: {
  37. type: Boolean,
  38. default: false
  39. }
  40. },
  41. data() {
  42. return {
  43. inputValue: this.value
  44. };
  45. },
  46. watch: {
  47. value(newVal,oldVal) {
  48. console.log(newVal,oldVal,'000')
  49. this.inputValue = +newVal;
  50. },
  51. inputValue(newVal, oldVal) {
  52. console.log(newVal,oldVal,this.index,'111')
  53. if (+newVal !== +oldVal) {
  54. this.$emit("change", newVal, this.index);
  55. }
  56. }
  57. },
  58. created() {
  59. this.inputValue = +this.value;
  60. },
  61. methods: {
  62. _calcValue(type) {
  63. if (this.disabled) {
  64. return;
  65. }
  66. const scale = this._getDecimalScale();
  67. let value = this.inputValue * scale;
  68. let step = this.step * scale;
  69. if (type === "minus") {
  70. value -= step;
  71. if (value < this.min) {
  72. return;
  73. }
  74. if(value > this.max){
  75. value = this.max
  76. }
  77. } else if (type === "plus") {
  78. value += step;
  79. if (value > this.max) {
  80. return;
  81. }
  82. if(value < this.min){
  83. value = this.min
  84. }
  85. }
  86. this.inputValue = String(value / scale);
  87. this.$emit('input',this.inputValue)
  88. },
  89. _getDecimalScale() {
  90. let scale = 1;
  91. // 浮点型
  92. if (~~this.step !== this.step) {
  93. scale = Math.pow(10, (this.step + "").split(".")[1].length);
  94. }
  95. return scale;
  96. },
  97. _onBlur(event) {
  98. let value = event.detail.value;
  99. if (!value) {
  100. // this.inputValue = 0;
  101. return;
  102. }
  103. value = +value;
  104. if (value > this.max) {
  105. value = this.max;
  106. } else if (value < this.min) {
  107. value = this.min;
  108. }
  109. this.inputValue = value;
  110. this.$emit('input',this.inputValue)
  111. },
  112. }
  113. };
  114. </script>
  115. <style lang="scss" scoped>
  116. $box-height: 34px;
  117. /* #ifdef APP-NVUE */
  118. $box-line-height: 34px;
  119. /* #endif */
  120. $box-line-height: 26px;
  121. $box-width: 35px;
  122. .uni-numbox {
  123. /* #ifndef APP-NVUE */
  124. display: flex;
  125. /* #endif */
  126. flex-direction: row;
  127. width: 120px;
  128. }
  129. .uni-numbox__value {
  130. background-color: $uni-bg-color;
  131. width: 40px;
  132. height: $box-height;
  133. line-height: $box-height;
  134. text-align: center;
  135. font-size: $uni-font-size-lg;
  136. }
  137. .uni-numbox__minus {
  138. /* #ifndef APP-NVUE */
  139. display: flex;
  140. /* #endif */
  141. flex-direction: row;
  142. align-items: center;
  143. justify-content: center;
  144. width: $box-width;
  145. height: $box-height;
  146. line-height: $box-height;
  147. font-size: 20px;
  148. color: $uni-text-color;
  149. background-color: $uni-bg-color-grey;
  150. }
  151. .uni-numbox__plus {
  152. /* #ifndef APP-NVUE */
  153. display: flex;
  154. /* #endif */
  155. flex-direction: row;
  156. align-items: center;
  157. justify-content: center;
  158. width: $box-width;
  159. height: $box-height;
  160. line-height: $box-height;
  161. background-color: $uni-bg-color-grey;
  162. }
  163. .uni-numbox--text {
  164. font-size: 40rpx;
  165. color: $uni-text-color;
  166. }
  167. .uni-numbox--disabled {
  168. color: $uni-text-color-disable;
  169. }
  170. </style>