vue在某页面监听键盘输入事件

  首先先了解下 键位和码值对照表

                             

在这里需求是通过按键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保存起来再使用）