html源码：
<div id="allScreen" @click="showScreen" >
<div >全屏内容 </div>
<span v-if="!fullscreen">全屏显示</span>
<span v-else-if="fullscreen">退出全屏</span>
</div>
js源码
data() {
return {
fullscreen:false,
};
},
methods: {
/**
* 全屏展示
*/
showScreen(){
let element = document.getElementById('allScreen');//id为allScreen的容器全屏现实
if (this.fullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
}
this.fullscreen = !this.fullscreen;
}
},
版权声明：本文为water_Popcorn原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。