fix:全屏使用DOM控制

houdunwang · Jun 25, 2023 · da66438 · da66438
1 parent 289f29f
commit da66438
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/src/renderer/src/components/FullScreen.vue b/src/renderer/src/components/FullScreen.vue
@@ -1,7 +1,18 @@
 <script setup lang="ts">
 import { FullScreen } from '@icon-park/vue-next'
-import useCamera from '@renderer/composables/useCamera'
-const { toggleFullscreen } = useCamera()
+// import useCamera from '@renderer/composables/useCamera'
+import { ref } from 'vue'
+// const { toggleFullscreen } = useCamera()
+
+const isFullScreen = ref<boolean>(false)
+const toggleFullScreen = () => {
+  isFullScreen.value ? document.exitFullscreen() : document.documentElement.requestFullscreen()
+  isFullScreen.value = !isFullScreen.value
+}
+
+document.addEventListener('fullscreenchange', (e) => {
+  isFullScreen.value = Boolean(document.fullscreenElement)
+})
 </script>
 
 <template>
@@ -11,7 +22,7 @@ const { toggleFullscreen } = useCamera()
     fill="#ffffff"
     class="icon"
     :strokeWidth="5"
-    @click="toggleFullscreen"
+    @click="toggleFullScreen"
   />
 </template>