手动点击设置全屏/退出全屏
html
<div style="height:100%" v-if="isReloadData">
<div @click="fullScreen()">{{ isFullScreen ? '退出全屏' : '全屏展示' }}</div>
</div>
js
export default {
data() {
return {
isFullScreen: false,
isReloadData:true,
}
}
}
// 全屏
fullScreen() {
const docElm = document.documentElement
if (this.isFullScreen) {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
}
} else {
if (docElm.requestFullscreen) {
docElm.requestFullscreen()
} else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen()
} else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen()
} else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen()
}
}
this.isFullScreen = !this.isFullScreen
this.isReloadData = false
this.$nextTick(()=>{
this.isReloadData = true // 重新渲染数据
this.getList()
})
},
标签：前端,手动,else,isFullScreen,isReloadData,全屏,document,docElm From： https://www.cnblogs.com/lpp-11-15/p/17551763.html