点击全屏按钮,整个页面全屏展示(相当于打开浏览器暗 F11)
<template> 中的代码
<div>
<img v-if="!fullscreen" @click="screen" class="full-screen" src="全屏的图片地址" alt="">
<img v-else @click="exitFullscreen" class="full-screen" src="非全屏的图片地址" alt="">
</div>
data() {
return {
fullscreen: false, // 是否全屏状态值
}
},
methods: {
// 启动全屏
screen() {
this.requestFullscreen(document.documentElement); // 整个网页
// this.requestFullscreen(document.getElementById("pageBox")); // 某个页面元素
this.fullscreen = true;
},
// 退出全屏
exitFullscreen() {
//W3C
if (document.exitFullscreen) {
document.exitFullscreen();
}
//FireFox
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
//Chrome等
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
//IE11
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
this.fullscreen = false;
},
}