可以利用插件screenful:
踩坑点1:不要安装最新版本,安装5.0.2即可
npm install screenfull@5.0.2
//调用监听事件
mounted() {
//调用监听事件
this.screenFull();
},
methods:{
//监听Esc事件;
screenFull() {
//监听f11事件
window.addEventListener("keydown", this.KeyDown, true);
//这些监听,可以监听到esc按键按下导致的全屏变化,但是监听不到F11的打开全屏的变化,isScreenFull
document.addEventListener("fullscreenchange", () => {
this.isFullscreen = !this.isFullscreen;//你要切换得图标使用得属性
});
document.addEventListener("mozfullscreenchange", () => {
this.isFullscreen = !this.isFullscreen;
});
document.addEventListener("webkitfullscreenchange", () => {
this.isFullscreen = !this.isFullscreen;
});
document.addEventListener("msfullscreenchange", () => {
this.isFullscreen = !this.isFullscreen;
});
},
KeyDown(event) {
if (event.keyCode === 122) {
event.returnValue = false;
this.isScreenFull(); //触发全屏的方法
}
},
//全屏方法
isScreenFull() {
if (!screenfull.isEnabled) {
return false;
}
// 这个方法会请求全屏,如果当前是全屏则会退出全屏。
// 无需自己再判断当前屏幕状态
screenfull.toggle();
},
}
踩坑点2:调试时候因为会打开控制台,所以可能有些问题,因为控制台出现后不是全屏,直接执行代码看结果即可。
注:若要显示按钮上文字状态,可通过监听isFullscreen 字段来显示。