js vue2 全屏退出全屏

最新推荐文章于 2024-08-26 20:25:07 发布

sapling666

最新推荐文章于 2024-08-26 20:25:07 发布

阅读量125

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/sapling666/article/details/132743566

版权

<div id="box">
全屏和切换全屏
<el-button v-if="!fullscreen" @click="fullScreen()">全屏</el-button>
				<el-button v-else @click="exitFullscreen()">退出全屏</el-button>
</div>

定义fullscreen: false
export default {
data () {
		return {
			fullscreen: false,
}
},
methods: {
		fullScreen () {
			//全屏
			var full = document.getElementById('box')
			this.launchIntoFullscreen(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
		},
		//全屏封装
		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()
		},
}