uni-number-box.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <template>
  2. <view class="uni-numbox">
  3. <view @click="_calcValue('minus')" class="uni-numbox__minus uni-numbox-btns" :style="{background}">
  4. <text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }" :style="{color}">-</text>
  5. </view>
  6. <input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" type="number"
  7. v-model="inputValue" :style="{background, color}" />
  8. <view @click="_calcValue('plus')" class="uni-numbox__plus uni-numbox-btns" :style="{background}">
  9. <text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }" :style="{color}">+</text>
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. /**
  15. * NumberBox 数字输入框
  16. * @description 带加减按钮的数字输入框
  17. * @tutorial https://ext.dcloud.net.cn/plugin?id=31
  18. * @property {Number} value 输入框当前值
  19. * @property {Number} min 最小值
  20. * @property {Number} max 最大值
  21. * @property {Number} step 每次点击改变的间隔大小
  22. * @property {String} background 背景色
  23. * @property {String} color 字体颜色(前景色)
  24. * @property {Boolean} disabled = [true|false] 是否为禁用状态
  25. * @event {Function} change 输入框值改变时触发的事件,参数为输入框当前的 value
  26. * @event {Function} focus 输入框聚焦时触发的事件,参数为 event 对象
  27. * @event {Function} blur 输入框失焦时触发的事件,参数为 event 对象
  28. */
  29. export default {
  30. name: "UniNumberBox",
  31. emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'],
  32. props: {
  33. value: {
  34. type: [Number, String],
  35. default: 1
  36. },
  37. modelValue: {
  38. type: [Number, String],
  39. default: 1
  40. },
  41. min: {
  42. type: Number,
  43. default: 0
  44. },
  45. max: {
  46. type: Number,
  47. default: 100
  48. },
  49. step: {
  50. type: Number,
  51. default: 1
  52. },
  53. background: {
  54. type: String,
  55. default: '#f5f5f5'
  56. },
  57. color: {
  58. type: String,
  59. default: '#333'
  60. },
  61. disabled: {
  62. type: Boolean,
  63. default: false
  64. }
  65. },
  66. data() {
  67. return {
  68. inputValue: 0
  69. };
  70. },
  71. watch: {
  72. value(val) {
  73. this.inputValue = +val;
  74. },
  75. modelValue(val) {
  76. this.inputValue = +val;
  77. this.$emit("change", +this.inputValue);
  78. }
  79. },
  80. created() {
  81. if (this.value === 1) {
  82. this.inputValue = +this.modelValue;
  83. }
  84. if (this.modelValue === 1) {
  85. this.inputValue = +this.value;
  86. }
  87. },
  88. methods: {
  89. _calcValue(type) {
  90. if (this.disabled) {
  91. return;
  92. }
  93. const scale = this._getDecimalScale();
  94. let value = this.inputValue * scale;
  95. let step = this.step * scale;
  96. if (type === "minus") {
  97. value -= step;
  98. if (value < (this.min * scale)) {
  99. return;
  100. }
  101. if (value > (this.max * scale)) {
  102. value = this.max * scale
  103. }
  104. }
  105. if (type === "plus") {
  106. value += step;
  107. if (value > (this.max * scale)) {
  108. return;
  109. }
  110. if (value < (this.min * scale)) {
  111. value = this.min * scale
  112. }
  113. }
  114. this.inputValue = (value / scale).toFixed(String(scale).length - 1);
  115. // console.log('this.inputValue ',this.inputValue );
  116. // this.modelValue = this.inputValue
  117. // this.$emit("change", +this.inputValue);
  118. // TODO vue2 兼容
  119. this.$emit("input", +this.inputValue);
  120. // TODO vue3 兼容
  121. this.$emit("update:modelValue", +this.inputValue);
  122. },
  123. _getDecimalScale() {
  124. let scale = 1;
  125. // 浮点型
  126. if (~~this.step !== this.step) {
  127. scale = Math.pow(10, String(this.step).split(".")[1].length);
  128. }
  129. return scale;
  130. },
  131. _onBlur(event) {
  132. this.$emit('blur', event)
  133. let value = event.detail.value;
  134. if (!value) {
  135. // this.inputValue = 0;
  136. return;
  137. }
  138. value = +value;
  139. if (value > this.max) {
  140. value = this.max;
  141. } else if (value < this.min) {
  142. value = this.min;
  143. }
  144. const scale = this._getDecimalScale();
  145. this.inputValue = value.toFixed(String(scale).length - 1);
  146. // this.$emit("change", +this.inputValue);
  147. this.$emit("input", +this.inputValue);
  148. this.$emit("update:modelValue", +this.inputValue);
  149. },
  150. _onFocus(event) {
  151. this.$emit('focus', event)
  152. }
  153. }
  154. };
  155. </script>
  156. <style lang="scss" scoped>
  157. $box-height: 26px;
  158. $bg: #f5f5f5;
  159. $br: 2px;
  160. $color: #333;
  161. .uni-numbox {
  162. /* #ifndef APP-NVUE */
  163. display: flex;
  164. /* #endif */
  165. flex-direction: row;
  166. }
  167. .uni-numbox-btns {
  168. /* #ifndef APP-NVUE */
  169. display: flex;
  170. /* #endif */
  171. flex-direction: row;
  172. align-items: center;
  173. justify-content: center;
  174. padding: 0 8px;
  175. background-color: $bg;
  176. /* #ifdef H5 */
  177. cursor: pointer;
  178. /* #endif */
  179. }
  180. .uni-numbox__value {
  181. margin: 0 2px;
  182. background-color: $bg;
  183. width: 40px;
  184. height: $box-height;
  185. text-align: center;
  186. font-size: $uni-font-size-lg;
  187. border-left-width: 0;
  188. border-right-width: 0;
  189. color: $color;
  190. }
  191. .uni-numbox__minus {
  192. border-top-left-radius: $br;
  193. border-bottom-left-radius: $br;
  194. }
  195. .uni-numbox__plus {
  196. border-top-right-radius: $br;
  197. border-bottom-right-radius: $br;
  198. }
  199. .uni-numbox--text {
  200. // fix nvue
  201. line-height: 20px;
  202. font-size: 20px;
  203. font-weight: 300;
  204. color: $color;
  205. }
  206. .uni-numbox .uni-numbox--disabled {
  207. color: #c0c0c0 !important;
  208. /* #ifdef H5 */
  209. cursor: not-allowed;
  210. /* #endif */
  211. }
  212. </style>