index.js 2.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. import { VantComponent } from '../common/component';
  2. import { canIUseModel } from '../common/version';
  3. VantComponent({
  4. field: true,
  5. classes: ['field-class', 'input-class', 'cancel-class'],
  6. props: {
  7. label: String,
  8. focus: Boolean,
  9. error: Boolean,
  10. disabled: Boolean,
  11. readonly: Boolean,
  12. inputAlign: String,
  13. showAction: Boolean,
  14. useActionSlot: Boolean,
  15. useLeftIconSlot: Boolean,
  16. useRightIconSlot: Boolean,
  17. leftIcon: {
  18. type: String,
  19. value: 'search',
  20. },
  21. rightIcon: String,
  22. placeholder: String,
  23. placeholderStyle: String,
  24. actionText: {
  25. type: String,
  26. value: '取消',
  27. },
  28. background: {
  29. type: String,
  30. value: '#ffffff',
  31. },
  32. maxlength: {
  33. type: Number,
  34. value: -1,
  35. },
  36. shape: {
  37. type: String,
  38. value: 'square',
  39. },
  40. clearable: {
  41. type: Boolean,
  42. value: true,
  43. },
  44. clearTrigger: {
  45. type: String,
  46. value: 'focus',
  47. },
  48. clearIcon: {
  49. type: String,
  50. value: 'clear',
  51. },
  52. },
  53. methods: {
  54. onChange(event) {
  55. if (canIUseModel()) {
  56. this.setData({ value: event.detail });
  57. }
  58. this.$emit('change', event.detail);
  59. },
  60. onCancel() {
  61. /**
  62. * 修复修改输入框值时,输入框失焦和赋值同时触发,赋值失效
  63. * https://github.com/youzan/@vant/weapp/issues/1768
  64. */
  65. setTimeout(() => {
  66. if (canIUseModel()) {
  67. this.setData({ value: '' });
  68. }
  69. this.$emit('cancel');
  70. this.$emit('change', '');
  71. }, 200);
  72. },
  73. onSearch(event) {
  74. this.$emit('search', event.detail);
  75. },
  76. onFocus(event) {
  77. this.$emit('focus', event.detail);
  78. },
  79. onBlur(event) {
  80. this.$emit('blur', event.detail);
  81. },
  82. onClear(event) {
  83. this.$emit('clear', event.detail);
  84. },
  85. onClickInput(event) {
  86. this.$emit('click-input', event.detail);
  87. },
  88. },
  89. });