index.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. import { use, isDef } from '../utils';
  2. const [sfc, bem] = use('stepper');
  3. export default sfc({
  4. props: {
  5. value: null,
  6. integer: Boolean,
  7. disabled: Boolean,
  8. inputWidth: String,
  9. asyncChange: Boolean,
  10. disableInput: Boolean,
  11. min: {
  12. type: [String, Number],
  13. default: 1
  14. },
  15. max: {
  16. type: [String, Number],
  17. default: Infinity
  18. },
  19. step: {
  20. type: [String, Number],
  21. default: 1
  22. },
  23. defaultValue: {
  24. type: [String, Number],
  25. default: 1
  26. }
  27. },
  28. data() {
  29. const value = this.range(isDef(this.value) ? this.value : this.defaultValue);
  30. if (value !== +this.value) {
  31. this.$emit('input', value);
  32. }
  33. return {
  34. currentValue: value
  35. };
  36. },
  37. computed: {
  38. minusDisabled() {
  39. return this.disabled || this.currentValue <= this.min;
  40. },
  41. plusDisabled() {
  42. return this.disabled || this.currentValue >= this.max;
  43. }
  44. },
  45. watch: {
  46. value(val) {
  47. if (val !== this.currentValue) {
  48. this.currentValue = this.format(val);
  49. }
  50. },
  51. currentValue(val) {
  52. this.$emit('input', val);
  53. this.$emit('change', val);
  54. }
  55. },
  56. methods: {
  57. // filter illegal characters
  58. format(value) {
  59. value = String(value).replace(/[^0-9.-]/g, '');
  60. return value === '' ? 0 : this.integer ? Math.floor(value) : +value;
  61. },
  62. // limit value range
  63. range(value) {
  64. return Math.max(Math.min(this.max, this.format(value)), this.min);
  65. },
  66. onInput(event) {
  67. const { value } = event.target;
  68. const formatted = this.format(value);
  69. if (!this.asyncChange) {
  70. if (+value !== formatted) {
  71. event.target.value = formatted;
  72. }
  73. this.currentValue = formatted;
  74. } else {
  75. event.target.value = this.currentValue;
  76. this.$emit('input', formatted);
  77. this.$emit('change', formatted);
  78. }
  79. },
  80. onChange(type) {
  81. if (this[`${type}Disabled`]) {
  82. this.$emit('overlimit', type);
  83. return;
  84. }
  85. const diff = type === 'minus' ? -this.step : +this.step;
  86. const value = Math.round((this.currentValue + diff) * 100) / 100;
  87. if (!this.asyncChange) {
  88. this.currentValue = this.range(value);
  89. } else {
  90. this.$emit('input', value);
  91. this.$emit('change', value);
  92. }
  93. this.$emit(type);
  94. },
  95. onFocus(event) {
  96. this.$emit('focus', event);
  97. },
  98. onBlur(event) {
  99. this.currentValue = this.range(this.currentValue);
  100. this.$emit('blur', event);
  101. // fix edge case when input is empty and min is 0
  102. if (this.currentValue === 0) {
  103. event.target.value = this.currentValue;
  104. }
  105. }
  106. },
  107. render(h) {
  108. const onChange = type => () => {
  109. this.onChange(type);
  110. };
  111. return (
  112. <div class={bem()}>
  113. <button
  114. class={bem('minus', { disabled: this.minusDisabled })}
  115. onClick={onChange('minus')}
  116. />
  117. <input
  118. type="number"
  119. class={bem('input')}
  120. value={this.currentValue}
  121. disabled={this.disabled || this.disableInput}
  122. style={{ width: this.inputWidth }}
  123. onInput={this.onInput}
  124. onFocus={this.onFocus}
  125. onBlur={this.onBlur}
  126. />
  127. <button
  128. class={bem('plus', { disabled: this.plusDisabled })}
  129. onClick={onChange('plus')}
  130. />
  131. </div>
  132. );
  133. }
  134. });