index.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. import { VantComponent } from '../common/component';
  2. import { commonProps, inputProps, textareaProps } from './props';
  3. VantComponent({
  4. field: true,
  5. classes: ['input-class', 'right-icon-class'],
  6. 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: [Boolean, Object], readonly: {
  7. type: Boolean,
  8. observer: 'setShowClear'
  9. }, required: Boolean, iconClass: String, clearable: {
  10. type: Boolean,
  11. observer: 'setShowClear'
  12. }, clickable: Boolean, inputAlign: String, customStyle: String, errorMessage: String, arrowDirection: String, showWordLimit: Boolean, errorMessageAlign: String, border: {
  13. type: Boolean,
  14. value: true
  15. }, titleWidth: {
  16. type: String,
  17. value: '90px'
  18. } }),
  19. data: {
  20. focused: false,
  21. innerValue: '',
  22. showClear: false
  23. },
  24. created() {
  25. this.value = this.data.value;
  26. this.setData({ innerValue: this.value });
  27. },
  28. methods: {
  29. onInput(event) {
  30. const { value = '' } = event.detail || {};
  31. this.value = value;
  32. this.setShowClear();
  33. this.emitChange();
  34. },
  35. onFocus(event) {
  36. this.focused = true;
  37. this.setShowClear();
  38. this.$emit('focus', event.detail);
  39. },
  40. onBlur(event) {
  41. this.focused = false;
  42. this.setShowClear();
  43. this.$emit('blur', event.detail);
  44. },
  45. onClickIcon() {
  46. this.$emit('click-icon');
  47. },
  48. onClear() {
  49. this.setData({ innerValue: '' });
  50. this.value = '';
  51. this.setShowClear();
  52. wx.nextTick(() => {
  53. this.emitChange();
  54. this.$emit('clear', '');
  55. });
  56. },
  57. onConfirm(event) {
  58. const { value = '' } = event.detail || {};
  59. this.value = value;
  60. this.setShowClear();
  61. this.$emit('confirm', value);
  62. },
  63. setValue(value) {
  64. this.value = value;
  65. this.setShowClear();
  66. if (value === '') {
  67. this.setData({ innerValue: '' });
  68. }
  69. this.emitChange();
  70. },
  71. onLineChange(event) {
  72. this.$emit('linechange', event.detail);
  73. },
  74. onKeyboardHeightChange(event) {
  75. this.$emit('keyboardheightchange', event.detail);
  76. },
  77. emitChange() {
  78. this.$emit('input', this.value);
  79. this.$emit('change', this.value);
  80. },
  81. setShowClear() {
  82. const { clearable, readonly } = this.data;
  83. const { focused, value } = this;
  84. this.setData({
  85. showClear: clearable && focused && !!value && !readonly
  86. });
  87. },
  88. noop() { }
  89. }
  90. });