1、定义容器
<div id="fullscreen" class="fullscreen" ref="fullscreen">
<!-- 需要全屏区域 -->
</div>
<a-button type="primary" @click="fullScreen()">全屏</a-button>
2、实现方法
fullScreen() {
//全屏
var full = document.getElementById('fullscreen')
this.launchIntoFullscreen(full)
},
//全屏封装
launchIntoFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
}
},
//退出全屏封装
exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
},
checkFull(){
//判断浏览器是否处于全屏状态 (需要考虑兼容问题)
//火狐浏览器
var isFull = document.mozFullScreen||
document.fullScreen ||
//谷歌浏览器及Webkit内核浏览器
document.webkitIsFullScreen ||
document.webkitRequestFullScreen ||
document.mozRequestFullScreen ||
document.msFullscreenEnabled
if(isFull === undefined) {
isFull = false
}
return isFull;
},
关于全屏后弹出层组件无法显示的问题
可以阅读我的下一篇文章
【AntDesign】解决antdesign控件在div全屏下不显示的问题