index.js 5.6 KB

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