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(‘退出全屏‘)
}
}
},

vue项目全屏按钮与f11按键的共存

原文：https://www.cnblogs.com/qmy-bx/p/14767804.html