vue項目全屏按鈕與f11按鍵的共存

一.使用插件screenfull.js來實現通過按鈕全屏
1.npm install --save screenfull
2.給按鈕綁定事件，用於切換全屏模式：
//全屏
screen() {
screenfull.toggle();
},
3.監聽鍵盤事件
created(){
window.addEventListener("keydown", this.KeyDown, true); // 監聽按鍵事件
}
//f11鍵盤事件
KeyDown(event) {
if (event.keyCode === 122) {
event.returnValue = false;
this.screen(); //觸發全屏的按鈕
}
},
4.判斷當前是否進入全屏（因為監聽鍵盤事件中監聽不到第二次按下f11鍵盤事件）
//判斷是否全屏
checkFull() {
let isFull = window.fullScreen || document.webkitIsFullScreen
this.isFull=isFull
return isFull;
},
5.頁面尺寸改變，調用判斷是否全屏方法
window.onresize=()=>{
//調用判斷全屏的方法，用來監聽
that.checkFull()
}
6.監聽是否全屏變量，進行操作
watch: {
isFull(newvalue,oldvalue) {
if(newvalue!=oldvalue){
//進行退出全屏的后的事件
console.log('退出全屏')
}
}
},