写在前面: 此次功能实现是基于vue项目,百度了一圈发现vue是有插件-screenfull,但想了想实现的原理应该脱离不了js,最后还是决定使用文档流和js来实现全屏。 代码如下
fullScreen () { // 全屏
var docElm = document.documentElement
if (docElm.requestFullscreen) {
docElm.requestFullscreen()
} else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen()
} else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen()
} else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen()
}
this.isFull = true
},
exitScreen () { // 退出全屏
if (document.exitFullScreen) {
document.exitFullscreen()
}
// 兼容火狐
console.log(document.mozExitFullScreen)
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
}
// 兼容谷歌等
if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
// 兼容IE
if (document.msExitFullscreen) {
document.msExitFullscreen()
}
this.isFull = false
},