vue.js - 如何在 Vue.js 中的整个页面上设置 keyup

Question

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

Answer 1

也许更好的方法是使用 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
    }
  }
}