uni-numbers-box.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  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. if (+newVal !== +oldVal && this.max >= +newVal && this.min <= +newVal) {
  53. this.$emit("change", newVal, this.index);
  54. }
  55. }
  56. },
  57. created() {
  58. this.inputValue = +this.value;
  59. },
  60. methods: {
  61. _calcValue(type) {
  62. if (this.disabled) {
  63. return;
  64. }
  65. const scale = this._getDecimalScale();
  66. let value = this.inputValue * scale;
  67. let step = this.step * scale;
  68. if (type === "minus") {
  69. value -= step;
  70. if (value < this.min) {
  71. return;
  72. }
  73. if(value > this.max){
  74. value = this.max
  75. }
  76. } else if (type === "plus") {
  77. value += step;
  78. if (value > this.max) {
  79. return;
  80. }
  81. if(value < this.min){
  82. value = this.min
  83. }
  84. }
  85. this.inputValue = String(value / scale);
  86. this.$emit('input',this.inputValue)
  87. },
  88. _getDecimalScale() {
  89. let scale = 1;
  90. // 浮点型
  91. if (~~this.step !== this.step) {
  92. scale = Math.pow(10, (this.step + "").split(".")[1].length);
  93. }
  94. return scale;
  95. },
  96. _onBlur(event) {
  97. let value = event.detail.value;
  98. if (!value) {
  99. this.inputValue = this.min;
  100. }
  101. value = +value;
  102. if (value > this.max) {
  103. value = this.max;
  104. } else if (value < this.min) {
  105. value = this.min;
  106. }
  107. this.inputValue = value;
  108. this.$emit('input',this.inputValue)
  109. },
  110. }
  111. };
  112. </script>
  113. <style lang="scss" scoped>
  114. $box-height: 30px;
  115. /* #ifdef APP-NVUE */
  116. $box-line-height: 30px;
  117. /* #endif */
  118. $box-line-height: 26px;
  119. $box-width: 30px;
  120. .uni-numbox {
  121. /* #ifndef APP-NVUE */
  122. display: flex;
  123. /* #endif */
  124. flex-direction: row;
  125. width: 120px;
  126. }
  127. .uni-numbox__value {
  128. background-color: $uni-bg-color;
  129. width: 40px;
  130. height: $box-height;
  131. line-height: $box-height;
  132. text-align: center;
  133. font-size: $uni-font-size-lg;
  134. margin: 0 10px;
  135. }
  136. .uni-numbox__minus {
  137. /* #ifndef APP-NVUE */
  138. display: flex;
  139. /* #endif */
  140. flex-direction: row;
  141. align-items: center;
  142. justify-content: center;
  143. width: $box-width;
  144. height: $box-height;
  145. line-height: $box-height;
  146. font-size: 20px;
  147. color: $uni-text-color;
  148. background-color: $uni-bg-color-grey;
  149. border-radius: $box-width;
  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. border-radius: $box-width;
  163. }
  164. .uni-numbox--text {
  165. font-size: 36rpx;
  166. color: $uni-text-color;
  167. }
  168. .uni-numbox--disabled {
  169. color: $uni-text-color-disable;
  170. }
  171. </style>