为了账号安全,请及时绑定邮箱和手机立即绑定

vue-cli创建的项目,如何让键盘监听事件,只在一个页面(url)内有效,如下图和代码

vue-cli创建的项目,如何让键盘监听事件,只在一个页面(url)内有效,如下图和代码

繁花不似锦 2019-03-15 17:18:51
说明要求假定现在有路由/news,/login监听键盘事件,只允许在/news页面内有效不管后面跳到哪个页面,都不会触发对应的键盘事件,只能在/news里才触发问题没有进入/news之前,按键盘上的键,不会触发事件,进过/news后,不管有没有按键盘上的键,再跳到别的页面,按键盘上的键,都会触发事件代码srcviewsnews.vue<template>   <div>     news  </div></template><script>export default {   data() {    return {      flag: true, //底部图片列表显示隐藏       name: "aa"     };   },  methods: {     keyLeft() {       alert(this.name);     },     keyUp() {       alert("向上方向键");     },     keyRight() {       alert("向右方向键");     },     keyDown() {       alert("向下方向键");     },     keys() {      var that = this;      document.onkeydown = function(e) {        let key = window.event.keyCode;        if (key == 37) {           that.keyLeft();         } else if (key == 38) {           that.keyUp();          return false; //有上下滚动条的时候,不向上滚动         } else if (key == 39) {           that.keyRight();         } else if (key == 40) {           that.keyDown();          return false; //有上下滚动条的时候,不向上滚动         }       };     }   },   created() {    if (this.flag == true && this.$route.path == "/news") {      this.keys();     }   },   mounted() {} };</script>
查看完整描述

2 回答

?
largeQ

TA贡献2039条经验 获得超7个赞

可以写一个自定义指令,指令里面是键盘的各种操作,然后把指令放到news组件里面

查看完整回答
反对 回复 2019-03-15
  • 2 回答
  • 0 关注
  • 576 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信