vue全屏功能实现

<template>
	<div>
		<div id="menu">
			<nav :style="isShow? '':'overflow:hidden' ">
				<div class="listBox">
					<div class="listTop"></div>
					<div class="listCount" @mouseenter="Mouseover()" @mouseleave="Mouseout()">
						<dl>
							<dt a-hover><a a-router ui-sref=""> 视频监控 </a></dt>
							<dd v-show="isShow">
								<div><a a-router ui-sref="main.project.rtVideo">实时视频</a></div>
								<div><a a-router ui-sref="main.project.hisVideo">历史视频</a></div>
							</dd>
						</dl>
						<dl>
							<dt a-hover><a a-router ui-sref=""> 视频监控 </a></dt>
							<dd v-show="isShow">
								<div><a a-router ui-sref="main.project.rtVideo">实时视频</a></div>
								<div><a a-router ui-sref="main.project.hisVideo">历史视频</a></div>
							</dd>
						</dl>
						<dl>
							<dt a-hover><a a-router ui-sref=""> 视频监控 </a></dt>
							<dd v-show="isShow">
								<div><a a-router ui-sref="main.project.rtVideo">实时视频</a></div>
								<div><a a-router ui-sref="main.project.hisVideo">历史视频</a></div>
							</dd>
						</dl>
						<dl>
							<dt a-hover><a a-router ui-sref=""> 视频监控 </a></dt>
							<dd v-show="isShow">
								<div><a a-router ui-sref="main.project.rtVideo">实时视频</a></div>
								<div><a a-router ui-sref="main.project.hisVideo">历史视频</a></div>
							</dd>
						</dl>
					</div>
				</div>
			</nav>
		</div>
		<div class="mainNavInfo" ng-controller="mainController">
			<ul class="list-inline navRightInfo clearfix">
				<li class="pull-right" id="QRcode" @mouseenter="twoMouseover()" @mouseleave="headMouseout()">
					<span class="glyphicon glyphicon-qrcode"></span>
					<div class="hiddenDiv" :style="twoShow? '':'display: none' " v-show="twoShow">

						<div class="qrDiv">
							<p class="text-center">电力监控</p>
							<img class="QRcode" src="../assets/map/source/app/qrCodeDownload/QRcode02.png" alt="APP">
						</div>
						<div class="qrDiv">
							<p class="text-center">电力运维</p>
							<img class="QRcode" src="../assets/map/source/app/qrCodeDownload/QRcode03.png" alt="APP">
						</div>
					</div>
				</li>
				<li style="width: 2.5vw;" @click="screen()" class="pull-right"><span class="glyphicon glyphicon-fullscreen"></span></li>

				<li id="userIcon" style="margin-right: 0.5vw; position: relative;" class="pull-right" @mouseenter="headMouseover()"
				 @mouseleave="headMouseout()">

					<span style="position: absolute; top:0; right: 0; z-index: 1; display: none;"><span class="badge">0</span></span>

					<span class="glyphicon glyphicon-user"></span>
					<div class="hiddenDiv text-center userInfo" :style="headShow? '':'display: none' " v-show="headShow">
						<img class="userPic" src="../assets/map/img/userPic.png" alt="暂不支持修改头像功能">
						<p class="userName">chris</p>
						<p style="border-top: 1px solid rgba(255,255,255,0.2);padding-top: 1vh;">剩余天数：99+</p>
						<p><a ng-click="openUserInfoPage()">个人信息</a></p>
						<p><a ng-click="modifyPassWord()">修改密码</a></p>
						<p><a ng-click="logout()">注销</a></p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	/* eslint-disable */
	export default {
		data() {
			return {
				isShow: false,
				headShow: false,
				twoShow: false,
			}
		},
		mounted() {},
		methods: {
			//二维码隐藏与显示切换
			twoMouseover() {
				this.twoShow = true
			},
			twoMouseout() {
				this.twoShow = false
			},
			//头像隐藏与显示切换
			headMouseover() {
				this.headShow = true
			},
			headMouseout() {
				this.headShow = false
			},
			//菜单隐藏与显示切换
			Mouseover() {
				this.isShow = true
			},
			Mouseout() {
				this.isShow = false
			},
			//全屏
			screen() {
				let element = document.documentElement;
				if (this.fullscreen) {
					if (document.exitFullscreen) {
						document.exitFullscreen();
					} else if (document.webkitCancelFullScreen) {
						document.webkitCancelFullScreen();
					} else if (document.mozCancelFullScreen) {
						document.mozCancelFullScreen();
					} else if (document.msExitFullscreen) {
						document.msExitFullscreen();
					}
				} else {
					if (element.requestFullscreen) {
						element.requestFullscreen();
					} else if (element.webkitRequestFullScreen) {
						element.webkitRequestFullScreen();
					} else if (element.mozRequestFullScreen) {
						element.mozRequestFullScreen();
					} else if (element.msRequestFullscreen) {
						// IE11
						element.msRequestFullscreen();
					}
				}
				this.fullscreen = !this.fullscreen;
			}
		}
	}
</script>

<style>
</style>

注：网上虽然很多但是我这是经过自己写的。