index.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. import { VantComponent } from '../common/component';
  2. import { isDef } from '../common/validator';
  3. const LONG_PRESS_START_TIME = 600;
  4. const LONG_PRESS_INTERVAL = 200;
  5. // add num and avoid float number
  6. function add(num1, num2) {
  7. const cardinal = Math.pow(10, 10);
  8. return Math.round((num1 + num2) * cardinal) / cardinal;
  9. }
  10. function equal(value1, value2) {
  11. return String(value1) === String(value2);
  12. }
  13. VantComponent({
  14. field: true,
  15. classes: ['input-class', 'plus-class', 'minus-class'],
  16. props: {
  17. value: {
  18. type: null,
  19. observer: 'observeValue',
  20. },
  21. integer: {
  22. type: Boolean,
  23. observer: 'check',
  24. },
  25. disabled: Boolean,
  26. inputWidth: String,
  27. buttonSize: String,
  28. asyncChange: Boolean,
  29. disableInput: Boolean,
  30. decimalLength: {
  31. type: Number,
  32. value: null,
  33. observer: 'check',
  34. },
  35. min: {
  36. type: null,
  37. value: 1,
  38. observer: 'check',
  39. },
  40. max: {
  41. type: null,
  42. value: Number.MAX_SAFE_INTEGER,
  43. observer: 'check',
  44. },
  45. step: {
  46. type: null,
  47. value: 1,
  48. },
  49. showPlus: {
  50. type: Boolean,
  51. value: true,
  52. },
  53. showMinus: {
  54. type: Boolean,
  55. value: true,
  56. },
  57. disablePlus: Boolean,
  58. disableMinus: Boolean,
  59. longPress: {
  60. type: Boolean,
  61. value: true,
  62. },
  63. theme: String,
  64. },
  65. data: {
  66. currentValue: '',
  67. },
  68. created() {
  69. this.setData({
  70. currentValue: this.format(this.data.value),
  71. });
  72. },
  73. methods: {
  74. observeValue() {
  75. const { value, currentValue } = this.data;
  76. if (!equal(value, currentValue)) {
  77. this.setData({ currentValue: this.format(value) });
  78. }
  79. },
  80. check() {
  81. const val = this.format(this.data.currentValue);
  82. if (!equal(val, this.data.currentValue)) {
  83. this.setData({ currentValue: val });
  84. }
  85. },
  86. isDisabled(type) {
  87. const { disabled, disablePlus, disableMinus, currentValue, max, min, } = this.data;
  88. if (type === 'plus') {
  89. return disabled || disablePlus || currentValue >= max;
  90. }
  91. return disabled || disableMinus || currentValue <= min;
  92. },
  93. onFocus(event) {
  94. this.$emit('focus', event.detail);
  95. },
  96. onBlur(event) {
  97. const value = this.format(event.detail.value);
  98. this.emitChange(value);
  99. this.$emit('blur', Object.assign(Object.assign({}, event.detail), { value }));
  100. },
  101. // filter illegal characters
  102. filter(value) {
  103. value = String(value).replace(/[^0-9.-]/g, '');
  104. if (this.data.integer && value.indexOf('.') !== -1) {
  105. value = value.split('.')[0];
  106. }
  107. return value;
  108. },
  109. // limit value range
  110. format(value) {
  111. value = this.filter(value);
  112. // format range
  113. value = value === '' ? 0 : +value;
  114. value = Math.max(Math.min(this.data.max, value), this.data.min);
  115. // format decimal
  116. if (isDef(this.data.decimalLength)) {
  117. value = value.toFixed(this.data.decimalLength);
  118. }
  119. return value;
  120. },
  121. onInput(event) {
  122. const { value = '' } = event.detail || {};
  123. // allow input to be empty
  124. if (value === '') {
  125. return;
  126. }
  127. let formatted = this.filter(value);
  128. // limit max decimal length
  129. if (isDef(this.data.decimalLength) && formatted.indexOf('.') !== -1) {
  130. const pair = formatted.split('.');
  131. formatted = `${pair[0]}.${pair[1].slice(0, this.data.decimalLength)}`;
  132. }
  133. this.emitChange(formatted);
  134. },
  135. emitChange(value) {
  136. if (!this.data.asyncChange) {
  137. this.setData({ currentValue: value });
  138. }
  139. this.$emit('change', value);
  140. },
  141. onChange() {
  142. const { type } = this;
  143. if (this.isDisabled(type)) {
  144. this.$emit('overlimit', type);
  145. return;
  146. }
  147. const diff = type === 'minus' ? -this.data.step : +this.data.step;
  148. const value = this.format(add(+this.data.currentValue, diff));
  149. this.emitChange(value);
  150. this.$emit(type);
  151. },
  152. longPressStep() {
  153. this.longPressTimer = setTimeout(() => {
  154. this.onChange();
  155. this.longPressStep();
  156. }, LONG_PRESS_INTERVAL);
  157. },
  158. onTap(event) {
  159. const { type } = event.currentTarget.dataset;
  160. this.type = type;
  161. this.onChange();
  162. },
  163. onTouchStart(event) {
  164. if (!this.data.longPress) {
  165. return;
  166. }
  167. clearTimeout(this.longPressTimer);
  168. const { type } = event.currentTarget.dataset;
  169. this.type = type;
  170. this.isLongPress = false;
  171. this.longPressTimer = setTimeout(() => {
  172. this.isLongPress = true;
  173. this.onChange();
  174. this.longPressStep();
  175. }, LONG_PRESS_START_TIME);
  176. },
  177. onTouchEnd() {
  178. if (!this.data.longPress) {
  179. return;
  180. }
  181. clearTimeout(this.longPressTimer);
  182. },
  183. },
  184. });