处理全屏若干问题

src/layout/component/aside.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-aside class="layout-aside" :class="setCollapseWidth" v-if="clientWidth > 1000">
+	<el-aside class="layout-aside" :class="setCollapseWidth" v-if="!isCurrenFullscreen && clientWidth > 1000">
 		<Logo v-if="setShowLogo" />
 		<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
 			<Vertical :menuList="menuList" :class="setCollapseWidth" />
@@ -34,6 +34,10 @@ export default {
 		const getThemeConfig = computed(() => {
 			return store.state.themeConfig.themeConfig;
 		});
+		// 获取卡片全屏信息
+		const isCurrenFullscreen = computed(() => {
+			return store.state.tagsViewRoutes.isCurrenFullscreen;
+		});
 		// 设置菜单展开/收起时的宽度
 		const setCollapseWidth = computed(() => {
 			let { layout, isCollapse, menuBar } = store.state.themeConfig.themeConfig;
@@ -118,6 +122,7 @@ export default {
 			setCollapseWidth,
 			setShowLogo,
 			getThemeConfig,
+			isCurrenFullscreen,
 			...toRefs(state),
 		};
 	},

src/layout/component/header.vue

@@ -1,5 +1,5 @@
 <template>
-	<el-header class="layout-header" :height="setHeaderHeight">
+	<el-header class="layout-header sackajljfs" :height="setHeaderHeight" v-show="!isCurrenFullscreen">
 		<NavBarsIndex />
 	</el-header>
 </template>
@@ -19,8 +19,13 @@ export default {
 			if (isTagsview && layout !== 'classic') return '84px';
 			else return '50px';
 		});
+		// 获取卡片全屏信息
+		const isCurrenFullscreen = computed(() => {
+			return store.state.tagsViewRoutes.isCurrenFullscreen;
+		});
 		return {
 			setHeaderHeight,
+			isCurrenFullscreen,
 		};
 	},
 };

src/layout/navBars/breadcrumb/user.vue

@@ -231,6 +231,14 @@ export default {
 				initI18n();
 				initComponentSize();
 			}
+			document.onkeydown = (event) => {
+				var e = event || window.event || arguments.callee.caller.arguments[0];
+				// 阻止F11全屏
+				if (e && e.keyCode === 122 && !state.isScreenfull) {
+					e.preventDefault();
+					onScreenfullClick();
+				}
+			};
 		});
 		return {
 			getUserInfos,

src/layout/navBars/tagsView/tagsView.vue

@@ -1,5 +1,9 @@
 <template>
-	<div class="layout-navbars-tagsview" :class="{ 'layout-navbars-tagsview-shadow': getThemeConfig.layout === 'classic' }">
+	<div
+		class="layout-navbars-tagsview"
+		:class="{ 'layout-navbars-tagsview-shadow': getThemeConfig.layout === 'classic' }"
+		v-show="!isCurrenFullscreen"
+	>
 		<el-scrollbar ref="scrollbarRef" @wheel.native.prevent="onHandleScroll">
 			<ul class="layout-navbars-tagsview-ul" :class="setTagsStyle" ref="tagsUlRef">
 				<li
@@ -42,7 +46,6 @@
 <script lang="ts">
 import { toRefs, reactive, onMounted, computed, ref, nextTick, onBeforeUpdate, onBeforeMount, onUnmounted, getCurrentInstance, watch } from 'vue';
 import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
-import screenfull from 'screenfull';
 import { useStore } from '/@/store/index';
 import { Session } from '/@/utils/storage';
 import Sortable from 'sortablejs';
@@ -75,6 +78,10 @@ export default {
 		const getThemeConfig = computed(() => {
 			return store.state.themeConfig.themeConfig;
 		});
+		// 获取卡片全屏信息
+		const isCurrenFullscreen = computed(() => {
+			return store.state.tagsViewRoutes.isCurrenFullscreen;
+		});
 		// 存储 tagsViewList 到浏览器临时缓存中，页面刷新时，保留记录
 		const addBrowserSetSession = (tagsViewList: Array<object>) => {
 			Session.set('tagsViewList', tagsViewList);
@@ -182,9 +189,7 @@ export default {
 			const item = state.tagsViewList.find((v: any) => v.path === path);
 			nextTick(() => {
 				router.push({ path, query: item.query });
-				const element = document.querySelector('.layout-main');
+				store.dispatch('tagsViewRoutes/openCurrenFullscreen');
-				const screenfulls: any = screenfull;
-				screenfulls.request(element);
 			});
 		};
 		// 当前项右键菜单点击，拿当前点击的路由路径对比 浏览器缓存中的 tagsView 路由数组，取当前点击项的详细路由信息
@@ -384,6 +389,7 @@ export default {
 			tagsUlRef,
 			onHandleScroll,
 			getThemeConfig,
+			isCurrenFullscreen,
 			setTagsStyle,
 			refreshCurrentTagsView,
 			closeCurrentTagsView,

src/store/interface/index.ts

@@ -65,6 +65,7 @@ export interface KeepAliveNamesState {
 // TagsView 路由列表
 export interface TagsViewRoutesState {
 	tagsViewRoutes: Array<object>;
+	isCurrenFullscreen: boolean;
 }
 
 // 用户信息

src/store/modules/tagsViewRoutes.ts

@@ -1,23 +1,47 @@
 import { Module } from 'vuex';
 // 此处加上 `.ts` 后缀报错，具体原因不详
 import { TagsViewRoutesState, RootStateTypes } from '/@/store/interface/index';
+import { ElMessage } from 'element-plus';
+import screenfull from 'screenfull';
 
 const tagsViewRoutesModule: Module<TagsViewRoutesState, RootStateTypes> = {
 	namespaced: true,
 	state: {
 		tagsViewRoutes: [],
+		isCurrenFullscreen: false,
 	},
 	mutations: {
 		// 设置 TagsView 路由
 		getTagsViewRoutes(state: any, data: Array<string>) {
 			state.tagsViewRoutes = data;
 		},
+		// 设置卡片全屏
+		setCurrenFullscreen(state: any, data: boolean) {
+			state.isCurrenFullscreen = data;
+		},
 	},
 	actions: {
 		// 设置 TagsView 路由
 		async setTagsViewRoutes({ commit }, data: Array<string>) {
 			commit('getTagsViewRoutes', data);
 		},
+		// 开启卡片全屏
+		openCurrenFullscreen({ commit }) {
+			if (!screenfull.isEnabled) {
+				ElMessage.warning('暂不不支持全屏');
+				return false;
+			}
+			screenfull.toggle();
+			const currenFullscreenChange = () => {
+				if (screenfull.isFullscreen) commit('setCurrenFullscreen', true);
+				else {
+					screenfull.off('change', currenFullscreenChange);
+					commit('setCurrenFullscreen', false);
+				}
+			};
+			screenfull.on('change', currenFullscreenChange);
+			commit('setCurrenFullscreen', true);
+		},
 	},
 };