v-date-picker 不会在选项卡退出时关闭

Question

总的来说，我对 vuetify 和 vue 还很陌生。我面临的问题是，当我单击日期选择器时，日历会弹出，当我退出时，光标会移动到下一个输入字段，但日历不会关闭。我希望它在退出时自动关闭。

我尝试设置 close-on-content-click="true" 而不是 false 但无济于事。我不确定还能尝试什么。

这是我发现的 vuetify 文档的代码笔，它与我的应用程序具有相似的实现和行为。 codepen

感谢您的任何意见。

Answer 1

在v-text-field

中添加@keydown.tab='menu1 = false'

Answer 2

close-on-content-click 适用于鼠标点击，不适用于键盘操作。当输入失去焦点时，您需要显式切换 v-menu 模型。

要在输入字段失去焦点时关闭菜单，我会将切换附加到模糊事件。您可以通过将 @blur 侦听器替换为一个方法来完成此操作，您将在该方法中将菜单模型设置为 false。

<v-text-field
  v-model="dateFormatted"
  label="Date"
  hint="MM/DD/YYYY format"
  persistent-hint
  prepend-icon="mdi-calendar"
  v-bind="attrs"
  @blur="updateDate"
  v-on="on"
/>

updateDate(event) {
  // This is the same value as dateFormatted,
  // you don't need to say this.dateFormatted like in your codepen.
  const value = event.target.value;
  this.date = this.parseDate(value);
  this.menu1 = false;
}

“解构”是 JS 的好习惯，而不是随机命名的变量或冗长，所以我会把第一行写成： const { value } = event.target;

如果您将其他变量传递给 updateDate 方法，您需要将其写为 updateDate($event, variable)，但如果不是，则 $event 作为第一个参数是给定的。

v-date-picker 不会在选项卡退出时关闭

v-date-picker does not close on tab out

vue.js

vuetify.js