index.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  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. disablePlus: Boolean,
  37. disableMinus: Boolean
  38. },
  39. computed: {
  40. minusDisabled() {
  41. return this.data.disabled || this.data.disableMinus || this.data.value <= this.data.min;
  42. },
  43. plusDisabled() {
  44. return this.data.disabled || this.data.disablePlus || this.data.value >= this.data.max;
  45. }
  46. },
  47. watch: {
  48. value(value) {
  49. if (value === '') {
  50. return;
  51. }
  52. const newValue = this.range(value);
  53. if (typeof newValue === 'number' && +this.data.value !== newValue) {
  54. this.set({ value: newValue });
  55. }
  56. },
  57. max: 'check',
  58. min: 'check',
  59. },
  60. data: {
  61. focus: false
  62. },
  63. created() {
  64. this.set({
  65. value: this.range(this.data.value)
  66. });
  67. },
  68. methods: {
  69. check() {
  70. const newValue = this.range(this.data.value);
  71. if (typeof newValue === 'number' && +this.data.value !== newValue) {
  72. this.set({ value: newValue });
  73. }
  74. },
  75. onFocus(event) {
  76. this.$emit('focus', event.detail);
  77. },
  78. onBlur(event) {
  79. const value = this.range(this.data.value);
  80. this.triggerInput(value);
  81. this.$emit('blur', event.detail);
  82. },
  83. // limit value range
  84. range(value) {
  85. value = String(value).replace(/[^0-9.-]/g, '');
  86. return Math.max(Math.min(this.data.max, value), this.data.min);
  87. },
  88. onInput(event) {
  89. const { value = '' } = event.detail || {};
  90. this.triggerInput(value);
  91. },
  92. onChange(type) {
  93. if (this.data[`${type}Disabled`]) {
  94. this.$emit('overlimit', type);
  95. return;
  96. }
  97. const diff = type === 'minus' ? -this.data.step : +this.data.step;
  98. const value = Math.round((+this.data.value + diff) * 100) / 100;
  99. this.triggerInput(this.range(value));
  100. this.$emit(type);
  101. },
  102. onMinus() {
  103. this.onChange('minus');
  104. },
  105. onPlus() {
  106. this.onChange('plus');
  107. },
  108. triggerInput(value) {
  109. this.set({
  110. value: this.data.asyncChange ? this.data.value : value
  111. });
  112. this.$emit('change', value);
  113. }
  114. }
  115. });