提交一下

1

package.json

@@ -40,6 +40,7 @@
     "path-to-regexp": "2.4.0",
     "qrcodejs2": "0.0.2",
     "qs": "^6.8.0",
+    "screenfull": "^5.1.0",
     "swiper": "^6.3.5",
     "v-charts": "^1.19.0",
     "vue": "2.6.10",

src/layout/components/instructions.vue

@@ -25,13 +25,15 @@
       @dragstop="resizestop"
       :preventActiveBehavior="true"
     >
-
       <div class="wall"></div>
       <div class="showBtnList">
         <!-- <i class="el-icon-copy-document" @click="showInstructions"></i> -->
         <i class="el-icon-minus minus" @click="showInstructions"></i>
-        <i class="icon-fullscreen"></i>
-         <i class="icon-tubiao-huanyuan"></i>
+        <i
+          class="iconfont icon-fullscreen fullscreen full-screen"
+          @click="fullPageBook()"
+        ></i>
+        <!-- <i class="iconfont icon-tubiao-huanyuan"></i> -->
       </div>
       <div class="iframeDiv" v-show="isResizing"></div>
       <iframe
@@ -53,10 +55,10 @@
       :x="videoX"
       class="videoWrap"
     >
-       <div class="videowall"></div>
+      <div class="videowall"></div>
       <div class="showBtnList">
         <!-- <i class="el-icon-copy-document" @click="showInstructions"></i> -->
-        <i class="el-icon-close" @click="showVideo=false"></i>
+        <i class="el-icon-close" @click="showVideo = false"></i>
       </div>
       <video
         id="video"
@@ -70,6 +72,7 @@
   </div>
 </template>
 <script>
+import screenfull from "screenfull";
 import VueDragResize from "vue-drag-resize";
 const defaultSettings = require("@/settings.js");
 
@@ -93,6 +96,7 @@ export default {
       videoY: "",
       videoW: 640,
       videoH: 390,
+      fullscreen: false,
     };
   },
   mounted() {
@@ -118,7 +122,27 @@ export default {
     onResizing(e) {
       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({
+          message: "you browser can not work",
+          type: "warning",
+        });
+        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){
 
     // },
@@ -167,17 +191,17 @@ export default {
     //   return this.$route.path;
     // },
     iframeWidth() {
+      console.log(this.w);
       return this.w + "px";
     },
     iframeHeight() {
       return this.h - 30 + "px";
     },
     VideoWidth() {
-      return this.videoW+ "px"
+      return this.videoW + "px";
     },
     VideoHeight() {
-
-        return this.videoH - 30 + "px";
+      return this.videoH - 30 + "px";
     },
   },
   watch: {
@@ -237,8 +261,12 @@ export default {
   background-color: #ccc;
   cursor: pointer;
 }
-.videowall{
+.videowall {
   height: 30px;
-   background-color: #ccc;
+  background-color: #ccc;
+}
+.fullscreen {
+  margin-left: 10px;
+  font-size: 20px;
 }
 </style>