index.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. import { nextTick } from '../common/utils';
  2. import { VantComponent } from '../common/component';
  3. import { commonProps, inputProps, textareaProps } from './props';
  4. VantComponent({
  5. field: true,
  6. classes: ['input-class', 'right-icon-class', 'label-class'],
  7. props: Object.assign(Object.assign(Object.assign(Object.assign({}, commonProps), inputProps), textareaProps), { size: String, icon: String, label: String, error: Boolean, center: Boolean, isLink: Boolean, leftIcon: String, rightIcon: String, autosize: null, required: Boolean, iconClass: String, clickable: Boolean, inputAlign: String, customStyle: String, errorMessage: String, arrowDirection: String, showWordLimit: Boolean, errorMessageAlign: String, readonly: {
  8. type: Boolean,
  9. observer: 'setShowClear',
  10. }, clearable: {
  11. type: Boolean,
  12. observer: 'setShowClear',
  13. }, clearTrigger: {
  14. type: String,
  15. value: 'focus',
  16. }, border: {
  17. type: Boolean,
  18. value: true,
  19. }, titleWidth: {
  20. type: String,
  21. value: '6.2em',
  22. }, clearIcon: {
  23. type: String,
  24. value: 'clear',
  25. }, extraEventParams: {
  26. type: Boolean,
  27. value: false,
  28. } }),
  29. data: {
  30. focused: false,
  31. innerValue: '',
  32. showClear: false,
  33. },
  34. created() {
  35. this.value = this.data.value;
  36. this.setData({ innerValue: this.value });
  37. },
  38. methods: {
  39. formatValue(value) {
  40. const { maxlength } = this.data;
  41. if (maxlength !== -1 && value.length > maxlength) {
  42. return value.slice(0, maxlength);
  43. }
  44. return value;
  45. },
  46. onInput(event) {
  47. const { value = '' } = event.detail || {};
  48. const formatValue = this.formatValue(value);
  49. this.value = formatValue;
  50. this.setShowClear();
  51. return this.emitChange(Object.assign(Object.assign({}, event.detail), { value: formatValue }));
  52. },
  53. onFocus(event) {
  54. this.focused = true;
  55. this.setShowClear();
  56. this.$emit('focus', event.detail);
  57. },
  58. onBlur(event) {
  59. this.focused = false;
  60. this.setShowClear();
  61. this.$emit('blur', event.detail);
  62. },
  63. onClickIcon() {
  64. this.$emit('click-icon');
  65. },
  66. onClickInput(event) {
  67. this.$emit('click-input', event.detail);
  68. },
  69. onClear() {
  70. this.setData({ innerValue: '' });
  71. this.value = '';
  72. this.setShowClear();
  73. nextTick(() => {
  74. this.emitChange({ value: '' });
  75. this.$emit('clear', '');
  76. });
  77. },
  78. onConfirm(event) {
  79. const { value = '' } = event.detail || {};
  80. this.value = value;
  81. this.setShowClear();
  82. this.$emit('confirm', value);
  83. },
  84. setValue(value) {
  85. this.value = value;
  86. this.setShowClear();
  87. if (value === '') {
  88. this.setData({ innerValue: '' });
  89. }
  90. this.emitChange({ value });
  91. },
  92. onLineChange(event) {
  93. this.$emit('linechange', event.detail);
  94. },
  95. onKeyboardHeightChange(event) {
  96. this.$emit('keyboardheightchange', event.detail);
  97. },
  98. emitChange(detail) {
  99. const { extraEventParams } = this.data;
  100. this.setData({ value: detail.value });
  101. let result;
  102. const data = extraEventParams
  103. ? Object.assign(Object.assign({}, detail), { callback: (data) => {
  104. result = data;
  105. } }) : detail.value;
  106. this.$emit('input', data);
  107. this.$emit('change', data);
  108. return result;
  109. },
  110. setShowClear() {
  111. const { clearable, readonly, clearTrigger } = this.data;
  112. const { focused, value } = this;
  113. let showClear = false;
  114. if (clearable && !readonly) {
  115. const hasValue = !!value;
  116. const trigger = clearTrigger === 'always' || (clearTrigger === 'focus' && focused);
  117. showClear = hasValue && trigger;
  118. }
  119. this.setData({ showClear });
  120. },
  121. noop() { },
  122. },
  123. });