Hello,各位简书的朋友大家好，这是我的第一个作品。很高兴可以在这里发布作品。我将把我在工作中get到的知识，分享到这里。希望能够帮助到大家。
今天分享的知识是HTML页面中可以实现全屏的一个api。
效果如下：
话不多说，直接贴代码。
首先我们需要一个按钮（icon图标之类的，总之可以绑定点击事件的东西)。
<button @click="handleFullScreen">点击切换全屏</button>
接下来就是他的回调函数
methods:{
// 全屏事件
handleFullScreen() {
let element = document.documentElement;
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();
}
}
}
}
代码格式有点乱，实在是在页面上不好调，下次注意。如哪里有不合理的地方，请在下方评论出来，作者看到一定回复。
