vue.js - 添加键盘快捷键以导航下一页和上一页

Question

我有三个页面home, about & details，我在每个页面的 Vue 生命周期钩子上添加了一个keydown事件侦听mounted器，所以每当用户单击时ctrl + rightArrow，我都会触发nextPage()方法，该方法会将下一页推送到 vue 路由器，同样ctrl + leftArrow应该触发prevPage(). 我在每个页面上实现相同的功能，在nextPage() & prevPage(). 这里的问题是，即使我没有keydown在某些页面上添加侦听器，事件也会触发并从先前加载的事件侦听器导航到路由，并且先前的侦听器也多次触发。

export default {
  mounted() {
    window.addEventListener('keydown', this.handleKeyPress);
  },
  methods: {
    handleKeyPress(e) {
      if (e.ctrlKey && e.keyCode === 37) { // Previous page
        this.prevPage();
      } else if (e.ctrlKey && e.keyCode === 39) { // Next page
        this.nextPage();
      }
    },
    nextPage() {
      this.$router.push({ name: 'about' });
    },
    prevPage() {
      this.$router.push({ name: 'home' });
    }
  }
}

标签： vue.jsvue-componentkeyboard-shortcutsvue-routerkeydown

Answer 1

您可以将事件处理程序附加到document

created() {
    if (typeof window !== 'undefined') {
        document.addEventListener('keydown', this.handleKeyPress)
    }
},
beforeDestroy() {
    if (typeof window !== 'undefined') {
        document.removeEventListener('keydown', this.handleKeyPress)
    }
}