Как убрать фокус с компонента DateTimePicker после нажатия кнопки "ok"?

Как можно предотвратить повторное открытие календаря при смене вкладок в компоненте DateTimePicker библиотеки Element Plus? Этот недостаток возникает после выбора даты и возвращения к элементу ввода. Как можно избежать такого поведения?
  • 28 февраля 2024 г. 12:18
Ответы на вопрос 2
Для обеих проблем можно использовать следующий подход:

1. Для снятия фокуса с компонента DateTimePicker после нажатия кнопки "ok" можно использовать метод blur() элемента input, который используется внутри компонента DateTimePicker. Например, если у вас есть ссылка на компонент DateTimePicker с именем datePicker, вы можете вызвать метод blur() после нажатия кнопки "ok":

```javascript
this.$refs.datePicker.blur()
```

2. Для предотвращения повторного открытия календаря при смене вкладок в компоненте DateTimePicker можно добавить слушатель события focus на элемент input внутри компонента и отменять открытие календаря при каждом фокусе. Например, вы можете добавить следующий код в вашем компоненте:

```javascript
<el-date-picker 
  v-model="value" 
  :editable="false" 
  ref="datePicker" 
  @focus="preventCalendarOpen"
></el-date-picker>

methods: {
  preventCalendarOpen() {
    this.$refs.datePicker.blur()
  }
}
```

Этот подход позволит избежать повторного открытия календаря при смене вкладок.
function onVisibleChange(state) {
  if (!state) {
    document.activeElement.blur();
  }
}

<el-date-picker
  @visible-change="onVisibleChange"
  ...
Похожие вопросы