uni-number-box.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <template>
  2. <view class="uni-numbox">
  3. <view class="uni-numbox-minus"
  4. @click="_calcValue('subtract')"
  5. >
  6. <text class="iconfont iconmove" :class="minDisabled?'uni-numbox-disabled': ''" ></text>
  7. </view>
  8. <input
  9. class="uni-numbox-value"
  10. type="number"
  11. :disabled="disabled"
  12. :value="inputValue"
  13. @blur="_onBlur"
  14. >
  15. <view
  16. class="uni-numbox-plus"
  17. @click="_calcValue('add')"
  18. >
  19. <text class="iconfont iconadd" :class="maxDisabled?'uni-numbox-disabled': ''" ></text>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. name: 'uni-number-box',
  26. props: {
  27. isMax: {
  28. type: Boolean,
  29. default: false
  30. },
  31. isMin: {
  32. type: Boolean,
  33. default: false
  34. },
  35. index: {
  36. type: Number,
  37. default: 0
  38. },
  39. value: {
  40. type: Number,
  41. default: 0
  42. },
  43. min: {
  44. type: Number,
  45. default: -Infinity
  46. },
  47. max: {
  48. type: Number,
  49. default: Infinity
  50. },
  51. step: {
  52. type: Number,
  53. default: 1
  54. },
  55. disabled: {
  56. type: Boolean,
  57. default: false
  58. }
  59. },
  60. data() {
  61. return {
  62. inputValue: this.value,
  63. minDisabled: false,
  64. maxDisabled: false
  65. }
  66. },
  67. created(){
  68. this.maxDisabled = this.isMax;
  69. this.minDisabled = this.isMin;
  70. },
  71. computed: {
  72. },
  73. watch: {
  74. inputValue(number) {
  75. const data = {
  76. number: number,
  77. index: this.index
  78. }
  79. this.$emit('eventChange', data);
  80. }
  81. },
  82. methods: {
  83. _calcValue(type) {
  84. const scale = this._getDecimalScale();
  85. let value = this.inputValue * scale;
  86. let newValue = 0;
  87. let step = this.step * scale;
  88. if(type === 'subtract'){
  89. newValue = value - step;
  90. if (newValue <= this.min){
  91. this.minDisabled = true;
  92. }
  93. if(newValue < this.min){
  94. newValue = this.min
  95. }
  96. if(newValue < this.max && this.maxDisabled === true){
  97. this.maxDisabled = false;
  98. }
  99. }else if(type === 'add'){
  100. newValue = value + step;
  101. if (newValue >= this.max){
  102. this.maxDisabled = true;
  103. }
  104. if(newValue > this.max){
  105. newValue = this.max
  106. }
  107. if(newValue > this.min && this.minDisabled === true){
  108. this.minDisabled = false;
  109. }
  110. }
  111. if(newValue === value){
  112. return;
  113. }
  114. this.inputValue = newValue / scale;
  115. },
  116. _getDecimalScale() {
  117. let scale = 1;
  118. // 浮点型
  119. if (~~this.step !== this.step) {
  120. scale = Math.pow(10, (this.step + '').split('.')[1].length);
  121. }
  122. return scale;
  123. },
  124. _onBlur(event) {
  125. let value = event.detail.value;
  126. if (!value) {
  127. this.inputValue = 0;
  128. return
  129. }
  130. value = +value;
  131. if (value > this.max) {
  132. value = this.max;
  133. } else if (value < this.min) {
  134. value = this.min
  135. }
  136. this.inputValue = value
  137. }
  138. }
  139. }
  140. </script>
  141. <style>
  142. .uni-numbox {
  143. /* position:absolute; */
  144. /* left: 30rpx; */
  145. /* bottom: 0; */
  146. display: flex;
  147. justify-content: flex-start;
  148. align-items: center;
  149. width:230rpx;
  150. height: 70rpx;
  151. background:#f5f5f5;
  152. }
  153. .uni-numbox-minus,
  154. .uni-numbox-plus {
  155. margin: 0;
  156. background-color: #f5f5f5;
  157. width: 70rpx;
  158. height: 100%;
  159. line-height: 70rpx;
  160. text-align: center;
  161. position: relative;
  162. }
  163. .uni-numbox-minus .yticon,
  164. .uni-numbox-plus .yticon{
  165. font-size: 36rpx;
  166. color: #555;
  167. }
  168. .uni-numbox-minus {
  169. border-right: none;
  170. border-top-left-radius: 6rpx;
  171. border-bottom-left-radius: 6rpx;
  172. }
  173. .uni-numbox-plus {
  174. border-left: none;
  175. border-top-right-radius: 6rpx;
  176. border-bottom-right-radius: 6rpx;
  177. }
  178. .uni-numbox-value {
  179. position: relative;
  180. background-color: #f5f5f5;
  181. width: 90rpx;
  182. height: 50rpx;
  183. text-align: center;
  184. padding: 0;
  185. font-size: 30rpx;
  186. }
  187. .uni-numbox-disabled.iconfont {
  188. color: #d6d6d6;
  189. }
  190. </style>