无法使用Key键关闭Vuetify导航抽屉

Question

我正在尝试通过单击escape键来关闭vuetify navigation drawer组件。为此，我尝试使用key modifier，如下所示：

    <v-navigation-drawer
      v-model="drawer"
      color="dark"
      app
      @keydown.esc="drawer = false"
    >

理论上，我希望这能行得通，但事实并非如此。当我点击退出键时，没有任何反应。你知道怎么让它工作吗？

值得注意的是，下面是整个app- bar /导航栏部分的代码概要：

<template>
  <v-app>
    <v-app-bar color="primary" app dark flat>
      ...
      <v-app-bar-nav-icon
        @click="drawer = !drawer"
      ></v-app-bar-nav-icon>
    </v-app-bar>
    <v-navigation-drawer
      v-model="drawer"
      color="dark"
      app
      @keydown.esc="drawer = false"
    >
      ...
    </v-navigation-drawer>
  </v-app>
</template>

Answer 1

你不能用一个抽屉做到这一点，它不是一个输入元素。

改为设置全局监听程序：

mounted () {
  window.addEventListener('keydown', this.keyDownHandler)
},
destroyed () {
  window.removeEventListener('keydown', this.keyDownHandler)
},
methods: {
  keyDownHandler (event) {
     if (event.code === 'Escape') {
       this.drawer = false
     }
  }
}