index.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. import { VantComponent } from '../common/component';
  2. import { commonProps, inputProps, textareaProps } from './props';
  3. import { canIUseModel } from '../common/version';
  4. VantComponent({
  5. field: true,
  6. classes: ['input-class', 'right-icon-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: [Boolean, Object],
  22. readonly: {
  23. type: Boolean,
  24. observer: 'setShowClear',
  25. },
  26. required: Boolean,
  27. iconClass: String,
  28. clearable: {
  29. type: Boolean,
  30. observer: 'setShowClear',
  31. },
  32. clickable: Boolean,
  33. inputAlign: String,
  34. customStyle: String,
  35. errorMessage: String,
  36. arrowDirection: String,
  37. showWordLimit: Boolean,
  38. errorMessageAlign: String,
  39. border: {
  40. type: Boolean,
  41. value: true,
  42. },
  43. titleWidth: {
  44. type: String,
  45. value: '90px',
  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. onClear() {
  79. this.setData({ innerValue: '' });
  80. this.value = '';
  81. this.setShowClear();
  82. wx.nextTick(() => {
  83. this.emitChange();
  84. this.$emit('clear', '');
  85. });
  86. },
  87. onConfirm(event) {
  88. const { value = '' } = event.detail || {};
  89. this.value = value;
  90. this.setShowClear();
  91. this.$emit('confirm', value);
  92. },
  93. setValue(value) {
  94. this.value = value;
  95. this.setShowClear();
  96. if (value === '') {
  97. this.setData({ innerValue: '' });
  98. }
  99. this.emitChange();
  100. },
  101. onLineChange(event) {
  102. this.$emit('linechange', event.detail);
  103. },
  104. onKeyboardHeightChange(event) {
  105. this.$emit('keyboardheightchange', event.detail);
  106. },
  107. emitChange() {
  108. if (canIUseModel()) {
  109. this.setData({ value: this.value });
  110. }
  111. wx.nextTick(() => {
  112. this.$emit('input', this.value);
  113. this.$emit('change', this.value);
  114. });
  115. },
  116. setShowClear() {
  117. const { clearable, readonly } = this.data;
  118. const { focused, value } = this;
  119. this.setData({
  120. showClear: !!clearable && !!focused && !!value && !readonly,
  121. });
  122. },
  123. noop() {},
  124. },
  125. });