Question

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

Answer 1

简短回答是肯定的，但具体取决于您的背景。如果您正在使用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>

Answer 2

也许更好的方法是使用Vue组件。这将允许您通过包含或不包含组件来控制何时侦听事件。这也可以让您使用Nuxt将事件侦听器附加到no-ssr component。

以下是创建组件的方式：

<template>
  <div></div>
</template>

<script>
  export default {
    created() {
      const component = this;
      this.handler = function (e) {
        component.$emit('keyup', e);
      }
      window.addEventListener('keyup', this.handler);
    },
    beforeDestroy() {
      window.removeEventListener('keyup', this.handler);
    }
  }
</script>

<style lang="stylus" scoped>
  div {
    display: none;
  }
</style>

然后在要使用该组件的页面上，添加以下HTML：

<keyboard-events v-on:keyup="keyboardEvent"></keyboard-events>

然后，您必须添加事件处理程序方法：

methods: {
  keyboardEvent (e) {
    if (e.which === 13) {
      // run your code
    }
  }
}

Answer 3

我创建了一个小的npm模块，该模块负责处理Vue中的全局按键事件，希望它可以使某人的生活更轻松： https://github.com/lupas/vue-keypress

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

3 个答案: