问题 如何在Vue.js中设置整个页面的键盘

可以设置一个 v-on:keyup.enter 在整个页面上，不仅仅是javascript框架中的输入元素Vue.js？

简短回答是肯定的，但具体取决于您的背景。如果您正在使用vue-router，因为我在当前项目中，您可能希望添加到您想要应用的最外层元素。在我的情况下，我正在使用实际的app.vue入口点的初始div元素。

我认为有一个问题是硬性要求，要素必须在潜在的可聚焦元素范围内。我正在处理的方式是设置-1 tabindex并在我的应用程序中的父元素上声明我的超级热键（目前主要用于调试目的）。

<template>
  <div
    id="app-main"
    tabindex="-1"
    @keyup.enter="doSomething"
  >
    <everything-else></everything-else>
  </div>
</template>

编辑：

作为旁注，我还为我的vue-router添加了一些额外的配置，以确保在转换页面时正确的元素被聚焦。这允许基于作为唯一可滚动部分的内容区域，页面向上/向下翻页已经在正确的部分中。您还必须将tabindex =“ - 1”添加到app-content元素中。

router.afterEach(function (transition) {
  document.getElementById('app-content').focus();
});

以及我的app-content组件的基础：

<template>
  <div id="app-content" tabindex="-1">
    <router-view
      id="app-view"
      transition="app-view__transition"
      transition-mode="out-in"
    ></router-view>
  </div>
</template>