vue 自定义 键盘监听事件

vue 自己的键盘监听事件 需要有焦点才能使用，比如input button等 如果我们想在整个页面使用的话 可以使用js原生的监听事件

在mounted中调用 就可以 调用 vue对象中 methods里的方法了

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  mounted() {
    this.initKey();
  },
  methods: {
    initKey() {
      document.onkeydown = () => {
        let e = event || window.event || arguments.callee.caller.arguments[0];
        console.log("document.onkeydown -> e", e);
        if (e.code === "ArrowDown" || e.code === "ArrowRight") {
          this.nextPage();
        }
        if (e.code === "ArrowUp" || e.code === "ArrowLeft") {
          this.lastPage();
        }
      };
    },
    lastPage: function() {
      console.log("上一页");
    },
    nextPage: function() {
      console.log("下一页");
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_9193