index.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. import { VantComponent } from '../common/component';
  2. VantComponent({
  3. field: true,
  4. classes: [
  5. 'input-class',
  6. 'plus-class',
  7. 'minus-class'
  8. ],
  9. props: {
  10. value: null,
  11. integer: Boolean,
  12. disabled: Boolean,
  13. inputWidth: String,
  14. asyncChange: Boolean,
  15. disableInput: Boolean,
  16. min: {
  17. type: null,
  18. value: 1
  19. },
  20. max: {
  21. type: null,
  22. value: Number.MAX_SAFE_INTEGER
  23. },
  24. step: {
  25. type: null,
  26. value: 1
  27. },
  28. showPlus: {
  29. type: Boolean,
  30. value: true
  31. },
  32. showMinus: {
  33. type: Boolean,
  34. value: true
  35. }
  36. },
  37. computed: {
  38. minusDisabled() {
  39. return this.data.disabled || this.data.value <= this.data.min;
  40. },
  41. plusDisabled() {
  42. return this.data.disabled || this.data.value >= this.data.max;
  43. }
  44. },
  45. watch: {
  46. value(value) {
  47. if (value === '') {
  48. return;
  49. }
  50. const newValue = this.range(value);
  51. if (typeof newValue === 'number' && +this.data.value !== newValue) {
  52. this.set({ value: newValue });
  53. }
  54. }
  55. },
  56. data: {
  57. focus: false
  58. },
  59. created() {
  60. this.set({
  61. value: this.range(this.data.value)
  62. });
  63. },
  64. methods: {
  65. onFocus(event) {
  66. this.$emit('focus', event.detail);
  67. },
  68. onBlur(event) {
  69. const value = this.range(this.data.value);
  70. this.triggerInput(value);
  71. this.$emit('blur', event.detail);
  72. },
  73. // limit value range
  74. range(value) {
  75. value = String(value).replace(/[^0-9.-]/g, '');
  76. return Math.max(Math.min(this.data.max, value), this.data.min);
  77. },
  78. onInput(event) {
  79. const { value = '' } = event.detail || {};
  80. this.triggerInput(value);
  81. },
  82. onChange(type) {
  83. if (this.data[`${type}Disabled`]) {
  84. this.$emit('overlimit', type);
  85. return;
  86. }
  87. const diff = type === 'minus' ? -this.data.step : +this.data.step;
  88. const value = Math.round((+this.data.value + diff) * 100) / 100;
  89. this.triggerInput(this.range(value));
  90. this.$emit(type);
  91. },
  92. onMinus() {
  93. this.onChange('minus');
  94. },
  95. onPlus() {
  96. this.onChange('plus');
  97. },
  98. triggerInput(value) {
  99. this.set({
  100. value: this.data.asyncChange ? this.data.value : value
  101. });
  102. this.$emit('change', value);
  103. }
  104. }
  105. });