index.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. import { VantComponent } from '../common/component';
  2. import { isDef } from '../common/utils';
  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(value) {
  20. if (!equal(value, this.data.currentValue)) {
  21. this.setData({ currentValue: this.format(value) });
  22. }
  23. }
  24. },
  25. integer: {
  26. type: Boolean,
  27. observer: 'check'
  28. },
  29. disabled: Boolean,
  30. inputWidth: null,
  31. buttonSize: null,
  32. asyncChange: Boolean,
  33. disableInput: Boolean,
  34. decimalLength: {
  35. type: Number,
  36. value: null,
  37. observer: 'check'
  38. },
  39. min: {
  40. type: null,
  41. value: 1,
  42. observer: 'check'
  43. },
  44. max: {
  45. type: null,
  46. value: Number.MAX_SAFE_INTEGER,
  47. observer: 'check'
  48. },
  49. step: {
  50. type: null,
  51. value: 1
  52. },
  53. showPlus: {
  54. type: Boolean,
  55. value: true
  56. },
  57. showMinus: {
  58. type: Boolean,
  59. value: true
  60. },
  61. disablePlus: Boolean,
  62. disableMinus: Boolean,
  63. longPress: {
  64. type: Boolean,
  65. value: true
  66. }
  67. },
  68. data: {
  69. currentValue: ''
  70. },
  71. created() {
  72. this.setData({
  73. currentValue: this.format(this.data.value)
  74. });
  75. },
  76. methods: {
  77. check() {
  78. const val = this.format(this.data.currentValue);
  79. if (!equal(val, this.data.currentValue)) {
  80. this.setData({ currentValue: val });
  81. }
  82. },
  83. isDisabled(type) {
  84. if (type === 'plus') {
  85. return (this.data.disabled ||
  86. this.data.disablePlus ||
  87. this.data.currentValue >= this.data.max);
  88. }
  89. return (this.data.disabled ||
  90. this.data.disableMinus ||
  91. this.data.currentValue <= this.data.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. });