index.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  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. alwaysEmbed: Boolean,
  65. },
  66. data: {
  67. currentValue: '',
  68. },
  69. created() {
  70. this.setData({
  71. currentValue: this.format(this.data.value),
  72. });
  73. },
  74. methods: {
  75. observeValue() {
  76. const { value, currentValue } = this.data;
  77. if (!equal(value, currentValue)) {
  78. this.setData({ currentValue: this.format(value) });
  79. }
  80. },
  81. check() {
  82. const val = this.format(this.data.currentValue);
  83. if (!equal(val, this.data.currentValue)) {
  84. this.setData({ currentValue: val });
  85. }
  86. },
  87. isDisabled(type) {
  88. const { disabled, disablePlus, disableMinus, currentValue, max, min, } = this.data;
  89. if (type === 'plus') {
  90. return disabled || disablePlus || currentValue >= max;
  91. }
  92. return disabled || disableMinus || currentValue <= min;
  93. },
  94. onFocus(event) {
  95. this.$emit('focus', event.detail);
  96. },
  97. onBlur(event) {
  98. const value = this.format(event.detail.value);
  99. this.emitChange(value);
  100. this.$emit('blur', Object.assign(Object.assign({}, event.detail), { value }));
  101. },
  102. // filter illegal characters
  103. filter(value) {
  104. value = String(value).replace(/[^0-9.-]/g, '');
  105. if (this.data.integer && value.indexOf('.') !== -1) {
  106. value = value.split('.')[0];
  107. }
  108. return value;
  109. },
  110. // limit value range
  111. format(value) {
  112. value = this.filter(value);
  113. // format range
  114. value = value === '' ? 0 : +value;
  115. value = Math.max(Math.min(this.data.max, value), this.data.min);
  116. // format decimal
  117. if (isDef(this.data.decimalLength)) {
  118. value = value.toFixed(this.data.decimalLength);
  119. }
  120. return value;
  121. },
  122. onInput(event) {
  123. const { value = '' } = event.detail || {};
  124. // allow input to be empty
  125. if (value === '') {
  126. return;
  127. }
  128. let formatted = this.filter(value);
  129. // limit max decimal length
  130. if (isDef(this.data.decimalLength) && formatted.indexOf('.') !== -1) {
  131. const pair = formatted.split('.');
  132. formatted = `${pair[0]}.${pair[1].slice(0, this.data.decimalLength)}`;
  133. }
  134. this.emitChange(formatted);
  135. },
  136. emitChange(value) {
  137. if (!this.data.asyncChange) {
  138. this.setData({ currentValue: value });
  139. }
  140. this.$emit('change', value);
  141. },
  142. onChange() {
  143. const { type } = this;
  144. if (this.isDisabled(type)) {
  145. this.$emit('overlimit', type);
  146. return;
  147. }
  148. const diff = type === 'minus' ? -this.data.step : +this.data.step;
  149. const value = this.format(add(+this.data.currentValue, diff));
  150. this.emitChange(value);
  151. this.$emit(type);
  152. },
  153. longPressStep() {
  154. this.longPressTimer = setTimeout(() => {
  155. this.onChange();
  156. this.longPressStep();
  157. }, LONG_PRESS_INTERVAL);
  158. },
  159. onTap(event) {
  160. const { type } = event.currentTarget.dataset;
  161. this.type = type;
  162. this.onChange();
  163. },
  164. onTouchStart(event) {
  165. if (!this.data.longPress) {
  166. return;
  167. }
  168. clearTimeout(this.longPressTimer);
  169. const { type } = event.currentTarget.dataset;
  170. this.type = type;
  171. this.isLongPress = false;
  172. this.longPressTimer = setTimeout(() => {
  173. this.isLongPress = true;
  174. this.onChange();
  175. this.longPressStep();
  176. }, LONG_PRESS_START_TIME);
  177. },
  178. onTouchEnd() {
  179. if (!this.data.longPress) {
  180. return;
  181. }
  182. clearTimeout(this.longPressTimer);
  183. },
  184. },
  185. });