vue全屏展示功能

1：全屏展示页面所有内容

<span  style="color:#918F8F" @click="clickFun">
	<img :src="isFullFlag?closeFullImg:openFullImg" style="width:12px;vertical-align:middle"/>
	{{isFullFlag?'退出全屏':'全屏'}}
</span>

<script>
export default {
	data(){
		return{
			isFullFlag:false
		}
	}
	mounted() {
		// 监听页面全屏
		window.addEventListener("fullscreenchange", (e)=> {
		  if(screenfull.isFullscreen){
			this.isFullFlag = true
		  }else{
			this.isFullFlag = false
		  }
		})
	},
	methods:{
		clickFun(){
			this.isFullFlag =!this.isFullFlag
			if (!screenfull.enabled) {
				this.$message({
					 message: 'Your browser does not work',
					 type: 'warning'
				})
				return false
			}
			screenfull.toggle()
		}
		
	}
}
</script>

2：全屏页面的部分内容

<template>
    <span  style="color:#918F8F" @click="clickFun">
	    <img :src="isFullFlag?closeFullImg:openFullImg" style="width:12px;vertical-align:middle"/>
	    {{isFullFlag?'退出全屏':'全屏'}}
    </span>
    <!--需要全屏展示的内容-->
    <div id="content"></div>
</template>

<script>
export default {
	data(){
		return{
			isFullFlag:false
		}
	}
	mounted() {
		// 监听页面全屏
		window.addEventListener("fullscreenchange", (e)=> {
		  if(screenfull.isFullscreen){
			this.isFullFlag = true
		  }else{
			this.isFullFlag = false
		  }
		})
	},
	methods:{
		clickFun(){
			this.isFullFlag =!this.isFullFlag
			const element = document.getElementById('content');//指定全屏区域元素
			if(this.isFullFlag){
				// screenfull.request(element);
				element.requestFullscreen()
			}else{
				document.exitFullscreen();
			}
		}
		
	}
}
</script>

注意：一个标签页的同一个id只能全屏一次，若有多个内容都需要全屏打开，请设置不同的id