提交一下

1

src/layout/components/instructions.vue

@@ -30,9 +30,16 @@
         <!-- <i class="el-icon-copy-document" @click="showInstructions"></i> -->
         <i class="el-icon-minus minus" @click="showInstructions"></i>
         <i
-          class="iconfont icon-fullscreen fullscreen full-screen"
-          @click="fullPageBook()"
+          class="iconfont icon-fullscreen fullscreen"
+          @click="fullPageBook"
+          v-if="!fullscreen"
         ></i>
+        <i
+          class="iconfont icon-tubiao-huanyuan huanyuan"
+          @click="resetBook"
+          v-else
+        ></i>
+        <!--  -->
         <!-- <i class="iconfont icon-tubiao-huanyuan"></i> -->
       </div>
       <div class="iframeDiv" v-show="isResizing"></div>
@@ -44,7 +51,8 @@
         class="pc iframe"
         :width="iframeWidth"
         :height="iframeHeight"
-        seamless allowfullscreen="true"
+        seamless
+        allowfullscreen="true"
       >
       </iframe>
     </vue-drag-resize>
@@ -97,12 +105,11 @@ export default {
       videoY: "",
       videoW: 640,
       videoH: 390,
-      fullscreen: false,
     };
   },
   mounted() {
     this.initSize();
-    document.onfullscreenchange = this.resizeI;
+    // document.onfullscreenchange = this.resizeI;
   },
   beforeDestroy() {},
   methods: {
@@ -111,7 +118,7 @@ export default {
         document.documentElement.clientWidth || document.body.clientWidth;
       this.w = 500;
       this.x = clientWidth - (this.w + 10);
-      this.y=130;
+      this.y = 130;
       this.docY =
         document.documentElement.clientHeight || document.body.clientHeight;
       this.h = this.docY - this.y;
@@ -119,30 +126,36 @@ export default {
       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;
+    // 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)
-        }
+    //       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("进入全屏");
+    //   } else {
+    //     if (e.target.getAttribute("id") == "instructions") {
+    //       // 初始化
+    //       this.initSize();
+    //     }
 
-        console.log("退出全屏");
-      }
-    },
+    //     console.log("退出全屏");
+    //   }
+    // },
     resizestop(e) {
-      this.h = Math.abs(e.height);
-      this.w = Math.abs(e.width);
+      if (!this.fullscreen) {
+        this.h = Math.abs(e.height);
+        this.w = Math.abs(e.width);
+      }
       setTimeout(() => {
         this.isResizing = false;
       }, 500);
@@ -150,17 +163,31 @@ export default {
     onResizing(e) {
       this.isResizing = true;
     },
+    resetBook() {
+      this.isShow = false;
+      this.$nextTick((res) => {
+        let clientWidth =
+          document.documentElement.clientWidth || document.body.clientWidth;
+        this.docY =
+          document.documentElement.clientHeight || document.body.clientHeight;
+        this.w = 500;
+        this.h = this.docY - this.y;
+        this.y = 130;
+        this.x = clientWidth - (this.w + 10);
+        this.isShow = true;
+      });
+    },
     fullPageBook() {
-      const bodyEle = document.getElementById("instructions");
-      if (!screenfull.isEnabled) {
-        this.$message({
-          message: "you browser can not work",
-          type: "warning",
-        });
-        return false;
-      } else {
-        screenfull.toggle(bodyEle);
-      }
+      this.isShow = false;
+      this.$nextTick((res) => {
+        const bodyEle = document.querySelector(".app-main");
+        this.h = this.docY - this.y;
+        // document.querySelector('#instructions .content-container').style.width = this.w+'px'
+        this.w = bodyEle.clientWidth;
+        this.x = 210;
+        this.y = 130;
+        this.isShow = true;
+      });
     },
     // onDragging(e){
 
@@ -168,8 +195,46 @@ export default {
     // onDragstop(e){},
     showInstructions() {
       this.isShow = !this.isShow;
-      if (this.isShow) {
-        this.$nextTick(() => {
+    },
+    showFullPage() {},
+  },
+  computed: {
+    // key() {
+    //   console.log(this.$route);
+    //   this.isShow = false;
+    //   return this.$route.path;
+    // },
+    iframeWidth() {
+      return this.w + "px";
+    },
+    iframeHeight() {
+      return this.h - 30 + "px";
+    },
+    VideoWidth() {
+      return this.videoW + "px";
+    },
+    VideoHeight() {
+      return this.videoH - 30 + "px";
+    },
+    fullscreen() {
+      const bodyEle = document.querySelector(".app-main");
+      // this.h = this.docY - this.y;
+      return (
+        this.h == this.docY - this.y &&
+        this.w == bodyEle.clientWidth &&
+        this.x == 210 &&
+        this.y == 130
+      );
+    },
+  },
+  watch: {
+    $route(to, from) {
+      this.isShow = false;
+      console.log(to);
+    },
+    isShow(val) {
+      if (val) {
+        this.$nextTick((res) => {
           // console.log(this.$refs.iframe,this.$refs.iframe.contentWindow)
           let outFrame = this.$refs.iframe;
           let outFrameWindow = this.$refs.iframe.contentWindow;
@@ -201,33 +266,6 @@ export default {
         });
       }
     },
-    showFullPage() {},
-  },
-  computed: {
-    // key() {
-    //   console.log(this.$route);
-    //   this.isShow = false;
-    //   return this.$route.path;
-    // },
-    iframeWidth() {
-      console.log(this.w);
-      return this.w + "px";
-    },
-    iframeHeight() {
-      return this.h - 30 + "px";
-    },
-    VideoWidth() {
-      return this.videoW + "px";
-    },
-    VideoHeight() {
-      return this.videoH - 30 + "px";
-    },
-  },
-  watch: {
-    $route(to, from) {
-      this.isShow = false;
-      console.log(to);
-    },
   },
 };
 </script>
@@ -288,4 +326,8 @@ export default {
   margin-left: 10px;
   font-size: 20px;
 }
+.huanyuan {
+  margin-left: 10px;
+  font-size: 22px;
+}
 </style>