提交一下

1

src/layout/components/instructions.vue

@@ -44,6 +44,7 @@
         class="pc iframe"
         :width="iframeWidth"
         :height="iframeHeight"
+        seamless allowfullscreen="true"
       >
       </iframe>
     </vue-drag-resize>
@@ -100,18 +101,45 @@ export default {
     };
   },
   mounted() {
-    let clientWidth =
-      document.documentElement.clientWidth || document.body.clientWidth;
-    this.w = 500;
-    this.x = clientWidth - (this.w + 10);
-    this.docY =
-      document.documentElement.clientHeight || document.body.clientHeight;
-    this.h = this.docY - this.y;
-    this.videoX = (clientWidth - 640) / 2;
-    this.videoY = (this.docY - 320) / 2;
+    this.initSize();
+    document.onfullscreenchange = this.resizeI;
   },
   beforeDestroy() {},
   methods: {
+    initSize() {
+      let clientWidth =
+        document.documentElement.clientWidth || document.body.clientWidth;
+      this.w = 500;
+      this.x = clientWidth - (this.w + 10);
+      this.y=130;
+      this.docY =
+        document.documentElement.clientHeight || document.body.clientHeight;
+      this.h = this.docY - this.y;
+
+      this.videoX = (clientWidth - 640) / 2;
+      this.videoY = (this.docY - 320) / 2;
+    },
+    resizeI(e) {
+      if (document.fullscreenElement) {
+        if (e.target.getAttribute("id") == "instructions") {
+          this.w =
+            document.documentElement.clientWidth || document.body.clientWidth;
+
+          this.h =
+            document.documentElement.clientHeight || document.body.clientHeight;
+            console.log('全屏的高',this.h,document.documentElement.clientHeight)
+        }
+
+        console.log("进入全屏");
+      } else {
+        if (e.target.getAttribute("id") == "instructions") {
+          // 初始化
+          this.initSize();
+        }
+
+        console.log("退出全屏");
+      }
+    },
     resizestop(e) {
       this.h = Math.abs(e.height);
       this.w = Math.abs(e.width);
@@ -123,10 +151,6 @@ export default {
       this.isResizing = true;
     },
     fullPageBook() {
-      // this.w=  document.documentElement.clientWidth || document.body.clientWidth;
-      // this.h= document.documentElement.clientHeight || document.body.clientHeightl
-      // this.x=0;
-      // this.y=0;
       const bodyEle = document.getElementById("instructions");
       if (!screenfull.isEnabled) {
         this.$message({
@@ -136,11 +160,6 @@ export default {
         return false;
       } else {
         screenfull.toggle(bodyEle);
-        this.w =
-          document.documentElement.clientWidth || document.body.clientWidth;
-          console.log(this.h)
-        this.h =
-          document.documentElement.clientHeight || document.body.clientHeight;
       }
     },
     // onDragging(e){
@@ -162,7 +181,7 @@ export default {
               let path = (e.composedPath && e.composedPath()) || e.path || [];
               if (path.length > 0) {
                 for (let i in path) {
-                  if (path[i].getAttribute("selectiongroup")) {
+                  if (path[i]?.getAttribute("selectiongroup")) {
                     console.log(
                       "打开视频链接",
                       e.path[i].getAttribute("selectiongroup")
@@ -241,7 +260,7 @@ export default {
   border: 1px solid #ccc;
 }
 .videoWrap {
-  z-index: 9999 !important;
+  z-index: 10000 !important;
   background-color: #fff;
   position: fixed;