uni-number-box.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  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: "UniNumberBox",
  15. props: {
  16. value: {
  17. type: [Number, String],
  18. default: 1
  19. },
  20. min: {
  21. type: Number,
  22. default: 0
  23. },
  24. max: {
  25. type: Number,
  26. default: 100
  27. },
  28. step: {
  29. type: Number,
  30. default: 1
  31. },
  32. disabled: {
  33. type: Boolean,
  34. default: false
  35. }
  36. },
  37. data() {
  38. return {
  39. inputValue: 0
  40. };
  41. },
  42. watch: {
  43. value(newVal,oldVal) {
  44. console.log(newVal,oldVal,'000')
  45. this.inputValue = +newVal;
  46. if (+newVal !== +oldVal) {
  47. this.$emit("change", newVal);
  48. }
  49. },
  50. inputValue(newVal, oldVal) {
  51. console.log(newVal,oldVal,'111')
  52. if (+newVal !== +oldVal) {
  53. // this.$emit("change", newVal);
  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 = 0;
  100. return;
  101. }
  102. value = +value;
  103. if (value > this.max) {
  104. value = this.max;
  105. } else if (value < this.min) {
  106. value = this.min;
  107. }
  108. this.inputValue = value;
  109. this.$emit('input',this.inputValue)
  110. },
  111. }
  112. };
  113. </script>
  114. <style lang="scss" scoped>
  115. $box-height: 34px;
  116. /* #ifdef APP-NVUE */
  117. $box-line-height: 34px;
  118. /* #endif */
  119. $box-line-height: 26px;
  120. $box-width: 35px;
  121. .uni-numbox {
  122. /* #ifndef APP-NVUE */
  123. display: flex;
  124. /* #endif */
  125. flex-direction: row;
  126. width: 120px;
  127. }
  128. .uni-numbox__value {
  129. background-color: $uni-bg-color;
  130. width: 40px;
  131. height: $box-height;
  132. line-height: $box-height;
  133. text-align: center;
  134. font-size: $uni-font-size-lg;
  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. }
  150. .uni-numbox__plus {
  151. /* #ifndef APP-NVUE */
  152. display: flex;
  153. /* #endif */
  154. flex-direction: row;
  155. align-items: center;
  156. justify-content: center;
  157. width: $box-width;
  158. height: $box-height;
  159. line-height: $box-height;
  160. background-color: $uni-bg-color-grey;
  161. }
  162. .uni-numbox--text {
  163. font-size: 40rpx;
  164. color: $uni-text-color;
  165. }
  166. .uni-numbox--disabled {
  167. color: $uni-text-color-disable;
  168. }
  169. </style>