Vue3+Ts封装全屏/退出全屏组件

月伤59

于 2024-08-19 15:38:10 发布

阅读量99

点赞数 1

文章标签： vue typescript 前端 javascript

本文链接：https://blog.csdn.net/qq_59625204/article/details/141326960

版权

通过调用浏览器的api：requestFullscreen来实现浏览器全屏，同时对浏览器进行了兼容性设置

<template>
	<div>
		<i class="full-button" @click="toggleFullscreen">
			<svg
				v-if="!isFullscreen"
				t="1724052190455"
				class="icon"
				viewBox="0 0 1024 1024"
				version="1.1"
				xmlns="http://www.w3.org/2000/svg"
				p-id="27834"
				width="18"
				height="18"
			>
				<path
					d="M414.165333 609.834667a42.666667 42.666667 0 0 1 0 60.330666L145.664 938.666667H276.906667a42.666667 42.666667 0 1 1 0 85.333333H42.666667a42.666667 42.666667 0 0 1-42.666667-42.666667v-234.24a42.666667 42.666667 0 1 1 85.333333 0v131.242667l268.501334-268.501333a42.666667 42.666667 0 0 1 60.330666 0zM609.834667 609.834667a42.666667 42.666667 0 0 1 60.330666 0L938.666667 878.336V747.093333a42.666667 42.666667 0 1 1 85.333333 0V981.333333a42.666667 42.666667 0 0 1-42.666667 42.666667h-234.24a42.666667 42.666667 0 1 1 0-85.333333h131.242667l-268.501333-268.501334a42.666667 42.666667 0 0 1 0-60.330666zM414.165333 414.165333a42.666667 42.666667 0 0 0 0-60.330666L145.664 85.333333H276.906667a42.666667 42.666667 0 0 0 0-85.333333H42.666667a42.666667 42.666667 0 0 0-42.666667 42.666667v234.24a42.666667 42.666667 0 0 0 85.333333 0V145.664l268.501334 268.501333a42.666667 42.666667 0 0 0 60.330666 0zM609.834667 414.165333a42.666667 42.666667 0 0 0 60.330666 0L938.666667 145.664V276.906667a42.666667 42.666667 0 1 0 85.333333 0V42.666667a42.666667 42.666667 0 0 0-42.666667-42.666667h-234.24a42.666667 42.666667 0 1 0 0 85.333333h131.242667l-268.501333 268.501334a42.666667 42.666667 0 0 0 0 60.330666z"
					p-id="27835"
					fill="#ffffff"
				></path>
			</svg>
			<svg
				v-else
				t="1724051727898"
				class="icon"
				viewBox="0 0 1024 1024"
				version="1.1"
				xmlns="http://www.w3.org/2000/svg"
				p-id="22073"
				width="18"
				height="18"
			>
				<path
					d="M400.595 345.365l-0.948-245.022c-0.42-18.881-16.018-30.215-34.956-30.637h-25.406c-18.88-0.42-33.874 16.018-33.457 34.881l1.061 133.251L138.772 72.417c-18.274-18.311-47.844-18.311-66.119 0-18.218 18.314-18.218 47.907 0 66.236l166.575 164.885-127.697 0.512c-18.88-0.477-36.394 12.606-39.26 34.899v24.08c0.477 18.917 16.077 34.558 34.957 34.972l243.826-1.438c0.362 0.035 0.608 0.171 0.928 0.171l17.1 0.378c9.441 0.226 17.9-3.467 23.923-9.593 6.124-6.083 8.382-14.58 8.131-24.078l-1.821-17.138c0.001-0.335 1.27-0.562 1.27-0.945z m365.616 356.086l127.524-0.512c18.88 0.421 36.357-11.183 39.26-33.474v-24.077c-0.478-18.922-16.134-34.558-34.957-35.037l-240.702 1.458c-0.378 0-0.605-0.151-0.967-0.151l-17.062-0.42c-9.441-0.226-17.95 3.469-23.98 9.611-6.159 6.03-8.361 14.559-8.173 24.057l1.881 17.1c0.033 0.42-1.234 0.661-1.234 0.986l0.986 241.248c0.477 18.863 16.078 30.162 34.957 30.576l24.017 0.037c18.827 0.433 33.874-16.055 33.403-34.941l-1.062-130.388 168.117 166.502c18.276 18.314 47.809 18.314 66.085 0 18.255-18.31 18.255-47.906 0-66.218L766.209 701.442z m-373.219-82.596c-6.028-6.14-14.541-9.834-23.923-9.61l-17.104 0.42c-0.346 0-0.566 0.151-0.948 0.151l-243.81-1.458c-18.881 0.478-34.503 16.112-34.956 35.034v24.078c2.843 22.292 20.357 33.892 39.206 33.474l129.158 0.42-167.983 166.37c-18.234 18.255-18.234 47.906 0 66.218 18.256 18.314 47.845 18.314 66.102 0l168.137-165.418-1.079 131.185c-0.42 18.922 14.579 35.413 33.424 34.938h25.406c18.937-0.477 34.54-11.713 34.956-30.637l0.987-243.05c0-0.346-1.267-0.571-1.267-0.949l1.821-17.104c0.206-9.495-1.993-18.025-8.116-24.053z m222.442-231.296c6.03 6.123 14.541 9.819 23.965 9.553l17.06-0.378c0.378 0 0.608-0.132 0.986-0.19l244.19 1.457c18.88-0.434 34.482-16.078 34.956-34.994l0.058-24.078c-2.898-22.331-20.439-35.355-39.26-34.939l-129.573-0.511 166.483-164.893c18.31-18.235 18.31-47.83 0.054-66.143-18.276-18.311-47.809-18.311-66.084 0L700.152 238.89l1.079-134.276c0.454-18.863-14.598-35.355-33.424-34.939H643.79c-18.881 0.477-34.484 11.773-34.957 30.637l-0.967 245.075c0 0.378 1.251 0.608 1.251 0.948l-1.859 17.138c-0.192 9.499 2.007 17.991 8.173 24.078z"
					p-id="22074"
					fill="#ffffff"
				></path>
			</svg>
		</i>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from "vue";

const isFullscreen = ref<boolean>(false);

const toggleFullscreen = () => {
	if (isFullscreen.value) {
		exitFullscreen();
	} else {
		enterFullscreen();
	}
};

const enterFullscreen = () => {
	const doc = document.documentElement as HTMLElement;
	if (doc.requestFullscreen) {
		doc.requestFullscreen();
	} else if ((doc as any).mozRequestFullScreen) {
		// Firefox
		(doc as any).mozRequestFullScreen();
	} else if ((doc as any).webkitRequestFullscreen) {
		// Chrome, Safari, Opera
		(doc as any).webkitRequestFullscreen();
	} else if ((doc as any).msRequestFullscreen) {
		// IE/Edge
		(doc as any).msRequestFullscreen();
	}
	isFullscreen.value = true;
};

const exitFullscreen = () => {
	if (document.exitFullscreen) {
		document.exitFullscreen();
	} else if ((document as any).mozCancelFullScreen) {
		// Firefox
		(document as any).mozCancelFullScreen();
	} else if ((document as any).webkitExitFullscreen) {
		// Chrome, Safari, Opera
		(document as any).webkitExitFullscreen();
	} else if ((document as any).msExitFullscreen) {
		// IE/Edge
		(document as any).msExitFullscreen();
	}
	isFullscreen.value = false;
};

const handleFullscreenChange = () => {
	isFullscreen.value = !!(
		document.fullscreenElement ||
		(document as any).mozFullScreenElement ||
		(document as any).webkitFullscreenElement ||
		(document as any).msFullscreenElement
	);
};

onMounted(() => {
	document.addEventListener("fullscreenchange", handleFullscreenChange);
	document.addEventListener("mozfullscreenchange", handleFullscreenChange);
	document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
	document.addEventListener("msfullscreenchange", handleFullscreenChange);
});

onBeforeUnmount(() => {
	document.removeEventListener("fullscreenchange", handleFullscreenChange);
	document.removeEventListener("mozfullscreenchange", handleFullscreenChange);
	document.removeEventListener("webkitfullscreenchange", handleFullscreenChange);
	document.removeEventListener("msfullscreenchange", handleFullscreenChange);
});
</script>

<style scoped>
.full-button {
	margin-right: 20px;
	cursor: pointer;
}
</style>

调用时：