处理resize边界问题

Author: zuoyanart

examples/App.vue

@@ -26,13 +26,9 @@
     <br />
     <h2 class="title">tips</h2>
     <el-button type="primary" id="tips" @click="tipsHandle">上</el-button>
-    <el-button type="primary" id="tips1" @mouseenter.native="tips1Handle"
-      >右</el-button
-    >
+    <el-button type="primary" id="tips1" @mouseenter.native="tips1Handle">右</el-button>
     <el-button type="primary" id="tips2" @click="tips2Handle">下</el-button>
-    <el-button type="primary" id="tips3" @click="tips3Handle"
-      >左-自定义样式</el-button
-    >
+    <el-button type="primary" id="tips3" @click="tips3Handle">左-自定义样式</el-button>
     <h2 class="title">page</h2>
     {{ this.info }}
     <el-button type="primary" id="tips" @click="pageHandle">自定义</el-button>
@@ -59,18 +55,9 @@
       </el-table-column>
       <el-table-column label="操作">
         <template slot-scope="scope">
-          <el-button size="mini" @click="submitHandle(scope.$index, scope.row)"
-            >编辑</el-button
-          >
-          <el-button
-            size="mini"
-            type="danger"
-            @click="confirmHandle(scope.$index, scope.row)"
-            >删除</el-button
-          >
-          <el-button type="primary" id="tipst" @click="tipstHandle" size="mini"
-            >上</el-button
-          >
+          <el-button size="mini" @click="submitHandle(scope.$index, scope.row)">编辑</el-button>
+          <el-button size="mini" type="danger" @click="confirmHandle(scope.$index, scope.row)">删除</el-button>
+          <el-button type="primary" id="tipst" @click="tipstHandle" size="mini">上</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -257,7 +244,7 @@ export default {
             }
           }
         },
-        area: ["901px", "101px"],
+        area: ["901px", "501px"],
         title: "这是一个标题这是一个标题这是一个标题这是一个标题",
         maxmin: true,
         shade: false,

examples/form.vue

@@ -53,13 +53,14 @@
     </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="onSubmit">立即创建</el-button>
+      <el-button type="primary" @click="pageHandle">新弹窗</el-button>
       <el-button @click="quxiao">取消</el-button>
     </el-form-item>
   </el-form>
 </template>
 
 <script>
-// import formComp from "./form1.vue";
+import formComp from "./form1.vue";
 export default {
   data() {
     return {
@@ -104,6 +105,33 @@ export default {
     }
   },
   methods: {
+    pageHandle() {
+      const id = this.$layer.iframe({
+        content: {
+          content: formComp,
+          parent: this,
+          data: {
+            info: this.info,
+            fn: () => {
+              alert(1);
+            }
+          }
+        },
+        area: ["901px", "201px"],
+        title: "这是一个标题这是一个标题这是一个标题这是一个标题",
+        maxmin: true,
+        shade: false,
+        shadeClose: false,
+        scrollbar: false,
+        resize: true,
+        btn: ['a', 'b'],
+        cancel: () => {
+          alert(2110);
+        }
+      });
+      console.log(id);
+      // this.$layer.full(id);
+    },
     onSubmit() {
       // const id = this.$layer.iframe({
       //   content: {

examples/form1.vue

@@ -19,12 +19,14 @@
 </el-form-item>
 <el-form-item>
   <el-button type="primary" @click="onSubmit">立即创建</el-button>
+  <el-button type="primary" @click="pageHandle">新弹窗</el-button>
   <el-button @click="quxiao">取消</el-button>
 </el-form-item>
 </el-form>
 </template>
 
 <script>
+import formComp from "./form.vue";
 export default {
   data() {
     return {
@@ -53,7 +55,7 @@ export default {
     },
     fn: {
       type: Function,
-      default: function() { }
+      default: function () { }
     },
     lydata: {
       type: Object,
@@ -63,6 +65,33 @@ export default {
     }
   },
   methods: {
+    pageHandle() {
+      const id = this.$layer.iframe({
+        content: {
+          content: formComp,
+          parent: this,
+          data: {
+            info: this.info,
+            fn: () => {
+              alert(1);
+            }
+          }
+        },
+        area: ["901px", "101px"],
+        title: "这是一个标题这是一个标题这是一个标题这是一个标题",
+        maxmin: true,
+        shade: false,
+        shadeClose: false,
+        scrollbar: false,
+        resize: true,
+        btn: ['a', 'b'],
+        cancel: () => {
+          alert(2110);
+        }
+      });
+      console.log(id);
+      // this.$layer.full(id);
+    },
     onSubmit() {
       // console.log("submit!");
       // alert(JSON.stringify(this.form));