Kaynağa Gözat

完善全屏退出事件,监听是否全屏,从而修改操作提示

DESKTOP-CRQ4N2U\jintian 1 yıl önce
ebeveyn
işleme
77189ff0de
1 değiştirilmiş dosya ile 33 ekleme ve 10 silme
  1. 33 10
      src/views/Main/components/header.vue

+ 33 - 10
src/views/Main/components/header.vue

@@ -30,7 +30,7 @@
 				<el-menu-item index="1">
 					<router-link to="/home/SysAdmin">系统管理</router-link>
 				</el-menu-item>
-<!-- 				<el-menu-item index="2">
+				<!-- 				<el-menu-item index="2">
 					<router-link to="/home/table">数据维护</router-link>
 				</el-menu-item>
 				<el-menu-item index="3">
@@ -41,15 +41,10 @@
 		<!-- 用户信息 -->
 		<div>
 			<ul>
-				<el-tooltip class="box-item" effect="dark" content="全屏" placement="bottom" trigger="click">
-					<li @click="fullscreen()">
-						<i :class="
-                isfullscreen == '全屏'
-                  ? 'iconfont icon-quanping'
-                  : 'iconfont icon-cancel-full-screen'
-              "></i>{{ isfullscreen }}
-					</li>
-				</el-tooltip>
+				<li @click="fullscreen()">
+					<i :class="isfullscreen == '全屏'? 'iconfont icon-quanping': 'iconfont icon-cancel-full-screen'"></i>
+					{{ isfullscreen }}
+				</li>
 				<li>
 					<el-dropdown size="medium">
 						<div class="avatar-wrapper">
@@ -129,6 +124,34 @@
 					mapView2.innerHTML = "";
 				}
 			},
+
+			//全屏
+			fullele() {
+				return (
+					document.fullscreenElement ||
+					document.webkitFullscreenElement ||
+					document.msFullscreenElement ||
+					document.mozFullScreenElement ||
+					null
+				);
+			},
+
+			//判断是否全屏
+			isFullScreen() {
+				return !!(document.webkitIsFullScreen || this.fullele());
+			},
+		},
+
+		mounted() {
+
+			let that = this
+			window.addEventListener('resize', function() {
+				if (!that.isFullScreen()) {
+					// 非全屏状态
+					//业务逻辑
+					that.isfullscreen = '全屏'
+				}
+			});
 		}
 	}
 </script>