index.js 3.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  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. } }),
  26. data: {
  27. focused: false,
  28. innerValue: '',
  29. showClear: false,
  30. },
  31. created() {
  32. this.value = this.data.value;
  33. this.setData({ innerValue: this.value });
  34. },
  35. methods: {
  36. onInput(event) {
  37. const { value = '' } = event.detail || {};
  38. this.value = value;
  39. this.setShowClear();
  40. this.emitChange();
  41. },
  42. onFocus(event) {
  43. this.focused = true;
  44. this.setShowClear();
  45. this.$emit('focus', event.detail);
  46. },
  47. onBlur(event) {
  48. this.focused = false;
  49. this.setShowClear();
  50. this.$emit('blur', event.detail);
  51. },
  52. onClickIcon() {
  53. this.$emit('click-icon');
  54. },
  55. onClickInput(event) {
  56. this.$emit('click-input', event.detail);
  57. },
  58. onClear() {
  59. this.setData({ innerValue: '' });
  60. this.value = '';
  61. this.setShowClear();
  62. nextTick(() => {
  63. this.emitChange();
  64. this.$emit('clear', '');
  65. });
  66. },
  67. onConfirm(event) {
  68. const { value = '' } = event.detail || {};
  69. this.value = value;
  70. this.setShowClear();
  71. this.$emit('confirm', value);
  72. },
  73. setValue(value) {
  74. this.value = value;
  75. this.setShowClear();
  76. if (value === '') {
  77. this.setData({ innerValue: '' });
  78. }
  79. this.emitChange();
  80. },
  81. onLineChange(event) {
  82. this.$emit('linechange', event.detail);
  83. },
  84. onKeyboardHeightChange(event) {
  85. this.$emit('keyboardheightchange', event.detail);
  86. },
  87. emitChange() {
  88. this.setData({ value: this.value });
  89. nextTick(() => {
  90. this.$emit('input', this.value);
  91. this.$emit('change', this.value);
  92. });
  93. },
  94. setShowClear() {
  95. const { clearable, readonly, clearTrigger } = this.data;
  96. const { focused, value } = this;
  97. let showClear = false;
  98. if (clearable && !readonly) {
  99. const hasValue = !!value;
  100. const trigger = clearTrigger === 'always' || (clearTrigger === 'focus' && focused);
  101. showClear = hasValue && trigger;
  102. }
  103. this.setData({ showClear });
  104. },
  105. noop() { },
  106. },
  107. });