NumInput.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. <template>
  2. <q-input
  3. v-model="filteredValue"
  4. outlined dense
  5. input-style="text-align: center"
  6. class="no-mp"
  7. :class="(error ? 'error' : '')"
  8. :disable="disable"
  9. >
  10. <slot></slot>
  11. <template #prepend>
  12. <q-icon
  13. v-ripple="validate(value - step)"
  14. :class="(validate(value - step) ? '' : 'disable')"
  15. name="la la-minus-circle"
  16. class="button"
  17. @click="minus"
  18. @mousedown.prevent.stop="onMouseDown($event, 'minus')"
  19. @mouseup.prevent.stop="onMouseUp"
  20. @mouseout.prevent.stop="onMouseUp"
  21. @touchstart.stop="onTouchStart($event, 'minus')"
  22. @touchend.stop="onTouchEnd"
  23. @touchcancel.prevent.stop="onTouchEnd"
  24. />
  25. </template>
  26. <template #append>
  27. <q-icon
  28. v-ripple="validate(value + step)"
  29. :class="(validate(value + step) ? '' : 'disable')"
  30. name="la la-plus-circle"
  31. class="button"
  32. @click="plus"
  33. @mousedown.prevent.stop="onMouseDown($event, 'plus')"
  34. @mouseup.prevent.stop="onMouseUp"
  35. @mouseout.prevent.stop="onMouseUp"
  36. @touchstart.stop="onTouchStart($event, 'plus')"
  37. @touchend.stop="onTouchEnd"
  38. @touchcancel.prevent.stop="onTouchEnd"
  39. />
  40. </template>
  41. </q-input>
  42. </template>
  43. <script>
  44. //-----------------------------------------------------------------------------
  45. import vueComponent from '../vueComponent.js';
  46. import * as utils from '../../share/utils';
  47. const componentOptions = {
  48. watch: {
  49. filteredValue: function(newValue) {
  50. if (this.validate(newValue)) {
  51. this.error = false;
  52. this.$emit('update:modelValue', this.string2number(newValue));
  53. } else {
  54. this.error = true;
  55. }
  56. },
  57. modelValue: function(newValue) {
  58. this.filteredValue = newValue;
  59. },
  60. }
  61. };
  62. class NumInput {
  63. _options = componentOptions;
  64. _props = {
  65. modelValue: Number,
  66. min: { type: Number, default: -Number.MAX_VALUE },
  67. max: { type: Number, default: Number.MAX_VALUE },
  68. step: { type: Number, default: 1 },
  69. digits: { type: Number, default: 0 },
  70. disable: Boolean
  71. };
  72. filteredValue = 0;
  73. error = false;
  74. created() {
  75. this.filteredValue = this.modelValue;
  76. }
  77. string2number(value) {
  78. return Number.parseFloat(Number.parseFloat(value).toFixed(this.digits));
  79. }
  80. validate(value) {
  81. let n = this.string2number(value);
  82. if (isNaN(n))
  83. return false;
  84. if (n < this.min)
  85. return false;
  86. if (n > this.max)
  87. return false;
  88. return true;
  89. }
  90. plus() {
  91. const newValue = this.modelValue + this.step;
  92. if (this.validate(newValue))
  93. this.filteredValue = newValue;
  94. }
  95. minus() {
  96. const newValue = this.modelValue - this.step;
  97. if (this.validate(newValue))
  98. this.filteredValue = newValue;
  99. }
  100. onMouseDown(event, way) {
  101. this.startClickRepeat = true;
  102. this.clickRepeat = false;
  103. if (event.button == 0) {
  104. (async() => {
  105. await utils.sleep(300);
  106. if (this.startClickRepeat) {
  107. this.clickRepeat = true;
  108. while (this.clickRepeat) {
  109. if (way == 'plus') {
  110. this.plus();
  111. } else {
  112. this.minus();
  113. }
  114. await utils.sleep(50);
  115. }
  116. }
  117. })();
  118. }
  119. }
  120. onMouseUp() {
  121. if (this.inTouch)
  122. return;
  123. this.startClickRepeat = false;
  124. this.clickRepeat = false;
  125. }
  126. onTouchStart(event, way) {
  127. if (!this.$root.isMobileDevice)
  128. return;
  129. if (event.touches.length == 1) {
  130. this.inTouch = true;
  131. this.onMouseDown({button: 0}, way);
  132. }
  133. }
  134. onTouchEnd() {
  135. if (!this.$root.isMobileDevice)
  136. return;
  137. this.inTouch = false;
  138. this.onMouseUp();
  139. }
  140. }
  141. export default vueComponent(NumInput);
  142. //-----------------------------------------------------------------------------
  143. </script>
  144. <style scoped>
  145. .no-mp {
  146. margin: 0;
  147. padding: 0;
  148. }
  149. .button {
  150. font-size: 130%;
  151. border-radius: 20px;
  152. color: #bbb;
  153. cursor: pointer;
  154. }
  155. .button:hover {
  156. color: #616161;
  157. background-color: #efebe9;
  158. }
  159. .error {
  160. background-color: #ffabab;
  161. border-radius: 3px;
  162. }
  163. .disable, .disable:hover {
  164. cursor: not-allowed;
  165. color: #bbb;
  166. background-color: white;
  167. }
  168. </style>