前端全屏顯示解決方案分享(附圖文詳解)

更新時間：2025年01月04日 11:51:46 作者：諸葛亮的芭蕉扇

這篇文章主要介紹了前端實現(xiàn)全屏顯示的三種解決方案,并針對每種方案的適用場景和優(yōu)缺點進(jìn)行了詳細(xì)分析,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

本文分享的內(nèi)容是前端全屏顯示的解決方案，來源于103項目中的需求。主要是將開發(fā)過程中遇到問題，解決問題的思路分享出來，對于后面遇到相同的業(yè)務(wù)場景時可以借鑒一下，提高我們的開發(fā)效率，少走一些彎路。

需求背景

用戶需要針對車輛的行駛路徑與收費路徑以及拆分路徑中的費用進(jìn)行比對分析，由于交互設(shè)計問題導(dǎo)致用戶無法同時比對較多的數(shù)據(jù)，如下圖：

用戶在門架流水中需要操作門架數(shù)據(jù)進(jìn)行二次計算，同樣是交互設(shè)計問題無法給到用戶較大的操作空間，如下圖：

基于以上的需求，需要前端在項目中加入全屏按鈕，便于給到用戶較大的空間進(jìn)行比對和操作，那么下面就將給出在開發(fā)過程中我用到的解決方案，以及方案的可行性。

使用 requestFullscreen 和 exitFullscreen API

通過瀏覽器的全屏 API（Fullscreen API）來控制頁面或某個元素進(jìn)入或退出全屏模式。這也是最開始我才用的方案，具體的代碼實現(xiàn)如下：

<template>
	......
	<div
		class="tab"
		:class="{ 'fullscreen-tab': isFullscreen }"
		id="analysis-tab"
	>
		......
	</div>
	...
</template>

<script lang='ts'>
export default defineComponent({
    setup(props) {
        ......;
        
        const isFullscreen = ref(false);
		const toggleFullscreen = () => {
			const elem = document.getElementById("analysis-tab");
			if (!document.fullscreenElement) {
				isFullscreen.value = true;
				if (elem.requestFullscreen) {
					elem.requestFullscreen();
				}
			} else {
				isFullscreen.value = false;
				if (document.exitFullscreen) {
					document.exitFullscreen();
				}
			}
		};
		const handleFullscreenChange = () => {
			isFullscreen.value = !!document.fullscreenElement;
		};

		onMounted(() => {
			// 監(jiān)聽鍵盤事件
			document.addEventListener(
				"fullscreenchange",
				handleFullscreenChange
			);
			document.addEventListener(
				"webkitfullscreenchange",
				handleFullscreenChange
			);
			document.addEventListener(
				"mozfullscreenchange",
				handleFullscreenChange
			);
			document.addEventListener(
				"MSFullscreenChange",
				handleFullscreenChange
			);
			getFeeBasicInfo(props.transId, props.transDate);
		});

		onBeforeUnmount(() => {
			// 移除事件監(jiān)聽
			document.removeEventListener(
				"fullscreenchange",
				handleFullscreenChange
			);
			document.removeEventListener(
				"webkitfullscreenchange",
				handleFullscreenChange
			);
			document.removeEventListener(
				"mozfullscreenchange",
				handleFullscreenChange
			);
			document.removeEventListener(
				"MSFullscreenChange",
				handleFullscreenChange
			);
		});
        
        return {
            ...,
            isFullscreen,
            toggleFullscreen,
		}
	}
});
</script>

這種解決方案是大部分前端首先能夠想到的，那么這種方案并不是適用大多數(shù)場景，對于僅僅需要全屏展示的業(yè)務(wù)場景來說是可以滿足的，但是遇到目標(biāo)元素全屏后，內(nèi)部有其他的操作：點擊按鈕展示彈窗、數(shù)據(jù)的增刪改查等，這些需求是不能滿足的。

比如103中的需求，用戶點擊全屏按鈕后，目標(biāo)元素全屏展示；用戶點擊新增門架，此時會有一個彈窗展示，但是實際情況是彈窗元素已經(jīng)在body元素中出現(xiàn)，但是在頁面中無法顯示。如下圖：

原因是：瀏覽器在全屏模式下通常會屏蔽掉一些頁面交互和 UI 元素，以減少干擾。當(dāng)你進(jìn)入全屏模式時，requestFullscreen 會把目標(biāo)元素的 z-index 設(shè)置為較高，可能會導(dǎo)致其他彈窗無法顯示在其之上。因為全屏模式本質(zhì)上覆蓋了整個視口，導(dǎo)致無法正常顯示任何其他 UI 元素。

這里需要注意的是：修改層級z-index是沒有用的，仍然不能在全屏之后展示彈窗，如下圖所示：

所以在第一版開發(fā)的時候，通過變量判斷是否進(jìn)入全屏模式，全屏模式下禁用按鈕的點擊操作，后續(xù)用戶要求既要能夠全屏展示，同時能夠進(jìn)行其他操作。

封裝全屏組件

應(yīng)用戶需求，調(diào)整方案，我想到的是封裝全屏組件，就是類似于UI庫的彈窗組件，當(dāng)用戶點擊全屏按鈕時，顯示全屏彈窗組件。這樣做看起來也是滿足需求的，同時也可以解決前面描述的問題，具體實現(xiàn)步驟如下：

CSS的position屬性

在 CSS 中，position: fixed 是一種常見的布局方式，用于將元素定位到瀏覽器窗口的固定位置，而不隨著頁面的滾動而移動。固定定位使元素始終保持在視口內(nèi)，不管頁面滾動與否。這個方案是從上面的方法中衍生出來的，通過position: fixed將需要全屏的內(nèi)容脫離文檔流，然后通過z-index控制層級，就可以完美解決我們的問題。

具體步驟如下：

代碼如下：

<div
	class="rate-visualization"
	v-loading="loading"
	element-loading-text="加載中..."
	:element-loading-spinner="$loadingStyle"
	id="rate-visualization"
>
	<!-- 收費基礎(chǔ)信息 -->
	.....
	
	<div
		class="tab"
		:class="{ 'fullscreen-tab': isFullscreen }"
		id="analysis-tab"
	>
		<!-- 全屏模塊 -->
	</div>
</div>

    
const isFullscreen = ref(false);
const toggleFullscreen = () => {
	const elem = document.getElementById("analysis-tab");
	if (!isFullscreen.value) {
		isFullscreen.value = true;
		document.body.appendChild(elem);
	} else {
		isFullscreen.value = false;
		const parent = document.getElementById("rate-visualization");
		const children = parent.children;
		parent.insertBefore(elem, children[1]);
	}
};

<style lang="less">
.fullscreen-tab {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
	background-color: #fff;
    .tab {
		height: 100%;
		width: 100%;
		padding-top: 6px;
		position: relative;
		.el-tabs__header {
			// margin: 0;
            padding-top: 6px;
			.el-tabs__nav-scroll {
				padding-left: 10px;
				.el-tabs__nav {
					border: none !important;
					.el-tabs__item {
						border: none !important;
						color: #409eff;
						&.is-active {
							background: linear-gradient(
								180deg,
								#83a0fd 0%,
								#2552dd 100%
							);
							border-radius: 10px 10px 0px 0px;
							color: #fff;
						}
					}
				}
			}
		}
		.el-tabs__content {
			height: calc(100% - 56px);
			padding: 0 20px 20px;
			.el-tab-pane {
				height: 100%;
			}
		}
	}
    .change-compare-mode {
        position: absolute;
        right: 50px;
        top: 12px;
        width: 106px;
        height: 32px;
        line-height: 32px;
    }
    .el-icon-full-screen {
        font-size: 20px;
        margin-top: 11px;
        margin-left: 8px;
        cursor: pointer;
        position: absolute;
        top: 8px;
        right: 20px;
    }
    .exit-fullscreen {
        height: 24px;
        width: 24px;
        margin-top: 9px;
        margin-left: 8px;
        cursor: pointer;
        position: absolute;
        top: 8px;
        right: 20px;
    }
}
</style>

當(dāng)用戶點擊全屏?xí)r，動態(tài)設(shè)置position: fixed脫離文檔流，設(shè)置全屏展示

點擊取消展示時，移除position: fixed屬性，同時需要將該元素移動到原來的位置

[!CAUTION]

需要注意的是樣式設(shè)置，由于全屏后脫離文檔流，因此屬性需要全局設(shè)置，要保證樣式的唯一性，避免被影響

完整效果如下：

總結(jié)

三種方案適用的場景是不一樣的，前兩種方案的適用性需要根據(jù)業(yè)務(wù)需求具體情況具體分析，不能兼容所有場景；第三種方案是相對來說適用性較強(qiáng)的，也有不足之處，就是動態(tài)控制DOM會造成重繪，對于性能會有一點影響。從復(fù)雜性和實用性考慮，首選方案3

將需要全屏的內(nèi)容封裝成組件，進(jìn)行復(fù)用

引入全屏組件，代碼如下：

<div class="tab__div_height-600">
	<tab-analysis
		ref="tatbAnalysisRef"
		:activeName="activeName"
		:feeBasicInfo="feeBasicInfo"
		:isFullscreen="tabAnalysisStatus"
		@updateActiveName="updateActiveName"
		@updateTabAnalysisStatus="updateTabAnalysisStatus"
	/>
</div>
......  
<c-full-screen v-model="tabAnalysisStatus" :close-btn-status="false">
	<tab-analysis
		ref="tatbAnalysisRef"
		:activeName="activeName"
		:feeBasicInfo="feeBasicInfo"
		:isFullscreen="tabAnalysisStatus"
		@updateActiveName="updateActiveName"
		@updateTabAnalysisStatus="updateTabAnalysisStatus"
	/>
</c-full-screen>

<!--
 @author: duanfc
 @time: 2024-11-15 15:40:00
 @description: 全屏彈窗組件
 @path: /
 @lastChange: duanfc
-->

<template>
	<transition name="fade">
		<div
			v-if="visible"
			class="fullscreen-dialog-overlay"
			@click.self="close"
		>
			<div class="fullscreen-dialog-content">
				<button
					class="fullscreen-dialog-close"
					@click="close"
					v-if="closeBtnStatus"
				>
					×
				</button>
				<div class="fullscreen-dialog-body">
					<slot></slot>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
export default {
	name: "fullScreenDialog",
	components: {},
	props: {
		value: {
			type: Boolean,
			default: false,
		},
		closeBtnStatus: {
			type: Boolean,
			default: true,
		},
	},
	data() {
		return {
			visible: this.value,
		};
	},
	watch: {
		value(newVal) {
			this.visible = newVal;
			if (newVal) {
				document.body.appendChild(this.$el);
			}
		},
	},
	computed: {},
	methods: {
		close() {
			this.visible = false;
			this.$emit("input", false); // 雙向綁定
		},
	},
	created() {},
	mounted() {
		if (this.visible) {
			document.body.appendChild(this.$el);
		}
	},
    destroyed() {
        if (this.$el && this.$el.parentNode) {
            this.$el.parentNode.removeChild(this.$el);
        }
    }
};
</script>

<style scoped>
.fullscreen-dialog-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.3);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}
.fullscreen-dialog-content {
	position: relative;
	width: 100%;
	height: 100%;
	background: white;
	overflow: auto;
	display: flex;
	flex-direction: column;
}

.fullscreen-dialog-close {
	position: absolute;
	top: 20px;
	right: 20px;
	background: none;
	border: none;
	font-size: 30px;
	color: #333;
	cursor: pointer;
}

.fullscreen-dialog-body {
	flex-grow: 1;
	padding: 16px 24px;
	overflow-y: auto;
}
.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.5s ease-in-out;
}

.fade-enter,
.fade-leave-to {
	opacity: 0;
}
</style>

tab-analysis組件是需要比對的模塊，封裝為組件，在c-full-screen全屏組件中二次復(fù)用。看起來寫法沒有問題，但是會有一個問題，就是全屏操作無法是沒有記憶功能的：當(dāng)用戶現(xiàn)在頁面中進(jìn)行操作，然后中途點擊全屏按鈕，此時的彈窗中是不能記錄到先前的用戶操作，是一個初始的內(nèi)容。如下：

當(dāng)然了，如果較真非要通過這種方式實現(xiàn)用戶需求，也許可以實現(xiàn)，但是對于前端來說處理的邏輯太多，復(fù)雜性也比較高；對于門架的全屏需求使用這種方式是比較符合的，因為內(nèi)部操作較少，便于對數(shù)據(jù)進(jìn)行控制，綜合評估還是不推薦采用此方式。