如何在 vuejs 或 javascript 中添加键盘快捷键 ESC？

Question

我想在我的 vuejs 应用程序中添加一个键盘，当用户按下键盘上的 ESC 键时，我的一个按钮被选中，例如，我的第一个按钮有 shortKey:1 我该怎么做？

这里是我的 HTML 代码：

<button type="button" class="btn btn-dark" v-for="item in toolSet" 
     :key="item.shortKey">
     <i class="icon-cust" :class="item.icon"></i>
</button>

这里是我的 vuejs 代码：

data() {
    return {
        toolSet: [{
                name: "hand-pointer",
                icon: "far fa-hand-pointer",
                shortKey: 1,
            },
            {
                name: "object-group",
                icon: "far fa-object-group",
                shortKey: 2,
            },
        ],
    };
},

Answer 1

我解决了这个问题，经过几个小时我遇到了它，这是解决方案。

注意：只需在您的项目中添加以下代码，不要做任何其他事情（我的意思是不需要使用@keydown.esc 等）：

mounted() {
        const items = document.querySelectorAll(".btn-dark");
        items[0].classList.add('btn- 
        first-styles')
        document.addEventListener("keydown", e => { 
             if (e.keyCode == 27) { items[0].classList.add("active_btn"); }
        }); 
        document.addEventListener('click', e => {
             items[0].classList.remove('active_btn') })
        }

如果你收到类似 e 变量不使用的错误，这个错误是因为 eslint，为了摆脱这个错误，你必须从 package.json 中禁用 eslint

Answer 2

在 for 循环中，key 属性用于跟踪每个节点的身份以用于响应性目的，因此它与事件处理无关。

您正在寻找的是将v-on 指令与这样的键盘事件一起使用

<button type="button" class="btn btn-dark" v-for="item in toolSet" v-on:keyup.esc="doSomething">
  <i class="icon-cust" :class="item.icon"></i>
</button>

您也可以使用快捷方式@，例如@keyup.esc。

同样从 2.6.0 版本开始，您可以通过以下方式为 v-on 指令动态分配事件名称：

<a v-on:[eventName]="doSomething"> ... </a>

如果您的版本 > 2.6.0，您可以执行以下操作

<button 
  type="button" 
  class="btn btn-dark" 
  v-for="item in toolSet" 
  @['keyup.' + item.shortKey]="doSomething"
>
  <i class="icon-cust" :class="item.icon"></i>
</button>

以下是一些对您有帮助的文档参考：v-on directive、Key Modifiers、Dynamic Arguments。