首先先了解下 键位和码值对照表
在这里需求是通过按键1、2、3、4、向上向下向左向右进行页面的切换
我是这样处理的:
(1)、界面通过ifame标签
方式(一):
<template>
<div class="changepages-index">
<header>这是头部</header>
<iframe name="myiframe" id="myrame" :src="menuList[key].url" frameborder="0" align="left" width="600" height="600" scrolling="no">
<p>你的浏览器不支持iframe标签</p>
</iframe>
</div>
</template>
方式(二):
<template>
<div class="changepages-index">
<div class="onIframe">
<header><p>{{current.title}}</p></header>
</div>
<iframe name="myiframe" id="myrame" :src="current.url" frameborder="0" align="left" width="600" height="600" scrolling="no">
<p>你的浏览器不支持iframe标签</p>
</iframe>
</div>
</template>
ps:注意:加个header,当点击了ifame组件之后,再点击时header组件时候,才能再继续键盘事件;
或者通过家蒙版来解决这个问题。
(2)、js处理
方式(一):
export default {
data(){
return{
menuList:[
{name:'A页面',url:'https://A.com/'},
{name:'B页面',url:'https://B.com/'},
{name:'C页面',url:'https://C.com/'},
{name:'D页面',url:'https://C.com/'},
],
key: 0
}
},
created(){
this.init()
},
methods:{
init(){
document.onkeydown = (e) => {
let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
if(e1 && e1.keyCode){
switch(e1.keyCode){
case 49:
this.key = 0;
break;
case 50:
this.key = 1;
break;
case 51:
this.key = 2;
break;
case 52:
this.key = 3;
break;
case 37:
case 38:
this.key === 0 ? this.key = 3 : this.key--
break;
case 39:
case 40:
this.key === 3 ? this.key = 0 : this.key++
break;
}
}
}
}
},
}
方式(二):添加定时器
export default {
data(){
return{
menuList:[
{title:'A1',url:'http:A1.html',index:0,keyCode:49},//1
{title:'A2',url:'http:A2.html',index:1,keyCode:50},//2
{title:'A3',url:'http:A3.html',index:2,keyCode:51},//3
{title:'A4',url:'http:A4.html',index:3,keyCode:52},//4
{title:'A5',url:'http:A5.html',index:4,keyCode:53},//5
{title:'A6',url:'http:A6.html',index:5,keyCode:54},//6
{title:'A7',url:'http:A7.html',index:6,keyCode:55},//7
{title:'B1',url:'http:B1.html',index:7,keyCode:81},//Q
{title:'B2',url:'http:B2.html',index:8,keyCode:87},//W
{title:'B3',url:'http:B3.html',index:9,keyCode:69},//E
{title:'B4',url:'http:B4.html',index:10,keyCode:82}//R
],
key: 0,
keyCode:49,//1
current:{title:'A1',url:'http:A1.html',index:0,keyCode:49},//1
}
},
created(){
this.changeInterval()
this.init()
},
updated(){
},
destroyed(){
clearInterval(this.CHANGE_TIMER)
},
methods:{
init(){
document.onkeydown = (e)=> {
let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
if(e1 && e1.keyCode){
let boo = !this.menuList.filter(item=>item.keyCode === this.keyCode).length
this.keyCode = e1.keyCode
this.current = boo ? this.current : this.menuList.filter(item=>item.keyCode === this.keyCode)[0]
clearInterval(this.CHANGE_TIMER)
this.key = boo ? this.key : this.menuList.filter((item)=>item.keyCode === this.keyCode)[0].index
this.changeInterval()
}
}
},
changeInterval(){
this.CHANGE_TIMER = setInterval(()=>{
this.key++
this.current = this.menuList[this.key]
if(this.key === 10){
this.key = -1
}
},60*1000)
}
}
}
ps:注意:这里的onkeydown的事件采用的是箭头函数 ,因为会有this的指向问题(当然,你也可以通过定义全局this,用一个全局变量把this保存起来再使用)