提交一下

1

src/layout/components/instructions.vue

@@ -13,15 +13,19 @@
       :snapToGrid="false"
       :isActive="true"
       :parentH="docY"
-      :h="300"
+      :h="h"
       :z="1999"
+      :w="w"
       :y="y"
+      :x="x"
       id="instructions"
       @resizestop="resizestop"
       @resizing="onResizing"
+      @dragging="onResizing"
+      @dragstop="resizestop"
       :preventActiveBehavior="true"
-      :isDraggable="false"
     >
+    <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>
@@ -29,10 +33,11 @@
       <div class="iframeDiv" v-show="isResizing"></div>
       <iframe
         id="iframeId"
+        ref='iframe'
         :src="url"
         frameborder="0"
         class="pc iframe"
-        :width="w"
+        :width="iframeWidth"
         :height="iframeHeight"
       >
       </iframe>
@@ -52,20 +57,30 @@ export default {
       url: "/html/index.html" + "#g=1&p=新建乐团",
       isShow: false,
       w: "",
-      y: "",
+      y: 130,
+      h:"",
+      x:"",
       docY: "",
       isResizing: false,
     };
   },
   mounted() {
-    this.w = document.documentElement.clientWidth || document.body.clientWidth;
+    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.y = this.docY - 300;
+    this.h =this.docY- this.y
+
+
+
+  },
+  beforeDestroy(){
   },
   methods: {
     resizestop(e) {
-      this.iframeHeight = Math.abs(e.height);
+      this.h = Math.abs(e.height);
+      this.w = Math.abs(e.width)
       setTimeout(() => {
         this.isResizing = false;
       }, 500);
@@ -73,6 +88,11 @@ export default {
     onResizing(e) {
       this.isResizing = true;
     },
+
+    // onDragging(e){
+
+    // },
+    // onDragstop(e){},
     showInstructions() {
       this.isShow = !this.isShow;
     },
@@ -84,9 +104,13 @@ export default {
       this.isShow = false;
       return this.$route.path;
     },
-    iframeHeight() {
-      return document.querySelector("#instructions")?.offsetHeight || "300px";
+    iframeWidth(){
+      return this.w+'px'
     },
+    iframeHeight(){
+      console.log(this.h)
+      return this.h-30 +'px'
+    }
   },
 };
 </script>
@@ -114,21 +138,22 @@ export default {
 }
 #instructions {
   background-color: #fff;
-  width: 100%;
   position: fixed;
   z-index: 9999;
-  bottom: 0;
-  left: 0;
   border: 1px solid #ccc;
 }
 .content-container {
-  width: 100% !important;
   .showBtnList {
     font-size: 20px;
     position: absolute;
     right: 20px;
     top: 5px;
-    background-color: #fff;
+    background-color: #ccc;
   }
 }
+.wall {
+  height: 30px;
+  background-color: #ccc;
+  cursor: pointer;
+}
 </style>