时间戳

首页 > 解决方案 > v-dialog/v-overlay 上的 Vue @keydown 停止工作时存在

vuejs2 - v-dialog/v-overlay 上的 Vue @keydown 停止工作时存在

问题描述

当存在 < v-card > 时，v-dialog/v-overlay 上的 Vue @keydown 似乎停止工作。为什么这不起作用，以及如何解决？

<v-overlay :value="olyThing" @keydown.esc="olyThing=false" tabindex="0">
    <v-card
        width="80vw"
        height="80vh"
        @click="olyThing=false">
    </v-card>
</v-overlay>

虽然这确实有效：

<v-overlay :value="olyThing" @keydown.esc="olyThing=false" tabindex="0">
</v-overlay>

不知何故，v-card 阻止了按键通过。试图将@keydown 放在 v-card 上，但这并不能解决问题。在 v-dialog 上的效果相同，而不是在 v-overlay 上。我也尝试过@keydown.native.esc，但似乎没有任何效果。

我不是在寻找涉及窗口上的 eventHandler 的解决方案。我想将此本地化为组件。

标签： vuejs2vuetify.js

解决方案

我一直无法弄清楚为什么v-card阻止了@keydownto 的功能。但是，仍然仅在当前页面上有效而不是全局的替代解决方案是：

一个完整的设置需要三个部分。

  1. 按下键时调用的方法。
  2. 添加事件监听器。
  3. 删除事件侦听器。

您将需要单独的方法以便稍后销毁事件侦听器：

methods: {
    onKeydown(e) {
        if (this.isOverlay) {
            if (e.keyCode == 37) {
                console.log('LEFT')
            } else if (e.keyCode == 39) {
                console.log('RIGHT')
            }
        }
    },
}

mounted() {
    // Keypresses on overlay:
    document.addEventListener('keydown', this.onKeydown)
},

beforeDestroy() {
    document.removeEventListener('keydown',this.onKeydown)
},

感谢西瓜糖的建议。

推荐阅读