!!!!亲测,有效!!!!
直接上代码:
data中定义变量:isFullScreen: false,
html:
<div class="btn">
<span id="requestFullcsreen" @click="showScreen" v-show="!isFullScreen">全屏</span>
<span id="exitFullScreen" @click="exitFullScreen" v-show="isFullScreen" class="out">退出</span>
</div>
-
js:
- methods中写方法
methods:{
// 点击全屏
showScreen(){
this.isFullScreen = true;
var element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
/* Firefox */
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
/* Chrome, Safari & Opera */
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
/* IE/Edge */
element.msRequestFullscreen();
}
},
// 退出全屏
exitFullScreen(){
this.isFullScreen = false;
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
},
// 监听全屏
checkFull(){
let isFull = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullScreenElement || document.msFullscreenElement;
if ( !isFull ) {
isFull = false
} else {
isFull = true
}
return isFull
},
}
监听窗口的大小:
mounted(){
window.addEventListener('resize',() => {
if (!this.checkFull() && this.isFullScreen) {
this.isFullScreen = false // 变量与data中对应
}
})
}
至此,完美解决全屏后按下Esc退出事件按钮变为【全屏】字眼!!!
【结束】
ps:---->>>>【有用的话记得点赞哦!如果不行的话可以后台私信哦!!!】