快捷導(dǎo)航

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

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

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

前言

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

需求背景

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

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

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

使用 requestFullscreen 和 exitFullscreen API

通過(guò)瀏覽器的全屏 API（Fullscreen API）來(lái)控制頁(yè)面或某個(gè)元素進(jìn)入或退出全屏模式。這也是最開(kāi)始我才用的方案，具體的代碼實(shí)現(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)聽(tīng)鍵盤(pá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)聽(tīng)
			document.removeEventListener(
				"fullscreenchange",
				handleFullscreenChange
			);
			document.removeEventListener(
				"webkitfullscreenchange",
				handleFullscreenChange
			);
			document.removeEventListener(
				"mozfullscreenchange",
				handleFullscreenChange
			);
			document.removeEventListener(
				"MSFullscreenChange",
				handleFullscreenChange
			);
		});
        
        return {
            ...,
            isFullscreen,
            toggleFullscreen,
		}
	}
});
</script>

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

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

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

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

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

封裝全屏組件

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

CSS的position屬性

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

具體步驟如下：

代碼如下：

<div
	class="rate-visualization"
	v-loading="loading"
	element-loading-text="加載中..."
	:element-loading-spinner="$loadingStyle"
	id="rate-visualization"
>
	<!-- 收費(fèi)基礎(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)用戶點(diǎn)擊全屏?xí)r，動(dòng)態(tài)設(shè)置position: fixed脫離文檔流，設(shè)置全屏展示

點(diǎn)擊取消展示時(shí)，移除position: fixed屬性，同時(shí)需要將該元素移動(dòng)到原來(lái)的位置

[!CAUTION]

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

完整效果如下：

總結(jié)

三種方案適用的場(chǎng)景是不一樣的，前兩種方案的適用性需要根據(jù)業(yè)務(wù)需求具體情況具體分析，不能兼容所有場(chǎng)景；第三種方案是相對(duì)來(lái)說(shuō)適用性較強(qiáng)的，也有不足之處，就是動(dòng)態(tài)控制DOM會(huì)造成重繪，對(duì)于性能會(huì)有一點(diǎn)影響。從復(fù)雜性和實(shí)用性考慮，首選方案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組件是需要比對(duì)的模塊，封裝為組件，在c-full-screen全屏組件中二次復(fù)用?？雌饋?lái)寫(xiě)法沒(méi)有問(wèn)題，但是會(huì)有一個(gè)問(wèn)題，就是全屏操作無(wú)法是沒(méi)有記憶功能的：當(dāng)用戶現(xiàn)在頁(yè)面中進(jìn)行操作，然后中途點(diǎn)擊全屏按鈕，此時(shí)的彈窗中是不能記錄到先前的用戶操作，是一個(gè)初始的內(nèi)容。如下：

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