From 50ee7232f3c98fe24a1f2e31dba9508cfec14887 Mon Sep 17 00:00:00 2001
From: gjj <Ganjj@probim.com.cn>
Date: Fri, 21 Feb 2025 17:35:39 +0800
Subject: [PATCH] 模型预览
---
src/components/FullScreenButton.vue | 62 +++++++++++++++++++++++++++++++
1 files changed, 62 insertions(+), 0 deletions(-)
diff --git a/src/components/FullScreenButton.vue b/src/components/FullScreenButton.vue
new file mode 100644
index 0000000..c139bc5
--- /dev/null
+++ b/src/components/FullScreenButton.vue
@@ -0,0 +1,62 @@
+<template>
+ <span @click="onFullscreen" class="inline-flex justify-center items-center w-[42px] h-[42px] rounded-md cursor-pointer bg-[hsla(0,0%,0%,0.9)]">
+ <img class="w-[18px] h-[18px]" src="../assets/images/fullscreen.png" alt="全屏" />
+ </span>
+</template>
+
+<script>
+ export default {
+ name: "FullscreenButton",
+ methods: {
+ onFullscreen() {
+ if (this.isFullscreenEnabled()) {
+ if (this.isFullScreen()) {
+ this.exitFullscreen();
+ } else {
+ this.openFullScreen(document.body);
+ }
+ }
+ },
+ // 判断当前文档是否能切换到全屏
+ isFullscreenEnabled() {
+ return document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled;
+ },
+ // 判断当前窗体是否为全屏状态
+ isFullScreen() {
+ return !!(document.fullscreenElement || document.mozFullScreen || document.webkitIsFullScreen || document.webkitFullScreen || document.msFullScreen);
+ },
+ // 打开全屏
+ openFullScreen(ele) {
+ if (ele.requestFullscreen) {
+ ele.requestFullscreen();
+ } else if (ele.mozRequestFullScreen) {
+ ele.mozRequestFullScreen();
+ } else if (ele.webkitRequestFullscreen) {
+ ele.webkitRequestFullscreen();
+ } else if (ele.msRequestFullscreen) {
+ ele.msRequestFullscreen();
+ }
+ this.$store.dispatch("common/setFullscreenInfo", {
+ isFullscreen: true,
+ fullscreenElement: ele,
+ });
+ },
+ // 退出全屏
+ exitFullscreen() {
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen();
+ } else if (document.webkitExitFullscreen) {
+ document.webkitExitFullscreen();
+ } else if (element.msExitFullscreen) {
+ element.msExitFullscreen();
+ }
+ this.$store.dispatch("common/setFullscreenInfo", {
+ isFullscreen: false,
+ fullscreenElement: null,
+ });
+ },
+ },
+ };
+</script>
--
Gitblit v1.9.3