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

44次阅读

共计 752 个字符,预计需要花费 2 分钟才能阅读完成。

说明
要求

假定现在有路由 /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>

正文完
 0