feat: model fullscreen

packages/pc/src/views/Antiquity/Detail/index.vue

@@ -25,7 +25,11 @@
       </template>
 
       <div v-else class="antiquity-detail-two-left">
-        <iframe ref="iframe" :src="`./model.html?m=${detail?.link}`" />
+        <iframe
+          ref="iframe"
+          :src="`./model.html?m=${detail?.link}`"
+          allowfullscreen="true"
+        />
         <div class="antiquity-detail-two-left-tools">
           <img
             draggable="false"
@@ -79,7 +83,7 @@ import UnFullscreenImg from "@/assets/images/icon_4-min.png";
 import PlayImg from "@/assets/images/icon_6-min.png";
 import PauseImg from "@/assets/images/icon_8-min.png";
 
-const { isFullscreen, toggle } = useFullscreen();
+const { isFullscreen } = useFullscreen();
 const route = useRoute();
 const detail = computed(() =>
   antiquityData.find((i) => i.id === Number(route.params.id))
@@ -114,6 +118,16 @@ const handleResetView = () => {
 
   if (!autoPlay.value) handleAutoPlay();
 };
+
+const toggle = () => {
+  if (!iframe.value) return;
+
+  if (iframe.value.requestFullscreen) iframe.value.requestFullscreen();
+  else if (iframe.value.mozRequestFullScreen)
+    iframe.value.mozRequestFullScreen();
+  else if (iframe.value.webkitRequestFullscreen)
+    iframe.value.webkitRequestFullscreen();
+};
 </script>
 
 <style lang="scss" scoped>