index.js 3.0 KB

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