全屏和退出全屏 js 的实现方式
这里是vue2的写法
全屏和退出全屏的切换 切换页面显示文字
<div id="box">
<el-button v-if="!fullscreen" @click="fullScreen()">全屏</el-button>
<el-button v-else @click="exitFullscreen()">退出全屏</el-button>
</div>
定义变量fullscreen:false
方法
fullScreen () {
//全屏
var full = document.getElementById('box')
this.fullscreenFn(full)
this.fullscreen = true
},
exitFullscreen () {
// 退出全屏
if (document.exitFullscreen)
document.exitFullscreen()
else if (document.mozCancelFullScreen)
document.mozCancelFullScreen()
else if (document.webkitExitFullscreen)
document.webkitExitFullscreen()
this.fullscreen = false
},
fullscreenFn (element) {
// 全屏
if (element.requestFullscreen)
element.requestFullscreen()
else if (element.mozRequestFullScreen)
element.mozRequestFullScreen()
else if (element.webkitRequestFullscreen)
element.webkitRequestFullscreen()
else if (element.msRequestFullscreen)
element.msRequestFullscreen()
},