Vueはページ上のキーボード入力イベントを監視します

  まず、キーの位置とコード値の比較表を理解します

                             

ここでの要件は、ボタン1、2、3、4、上、下、左、および右でページを切り替えることです。

私はそれを次のように扱いました：

（1）インターフェースはifameタグを介しています

方法1）：

<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>

方法（2）：

<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：注：ヘッダーを追加します。ifameコンポーネントをクリックしてからヘッダーコンポーネントをクリックすると、キーボードイベントを続行できます。

または、ホームマスクを使用してこの問題を解決します。

（2）、js処理

方法1）：

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;
                        }
                    }
                }
            }
        },
}

方法（2）：タイマーを追加する

 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を定義することで、これをグローバル変数で保存することもできます）