From 6cf1f8636c2ecdad926883f80544d164c4c26bd0 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 23 Sep 2022 19:56:10 +0800
Subject: [PATCH] =?UTF-8?q?feat(form):=20form-dialog=E9=87=8D=E6=96=B0?=
 =?UTF-8?q?=E6=89=93=E5=BC=80=E6=98=AFform=E9=87=8D=E6=96=B0=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/form/src/FormDialog.vue | 98 ++++++++++++++++----------------
 1 file changed, 50 insertions(+), 48 deletions(-)

diff --git a/packages/form/src/FormDialog.vue b/packages/form/src/FormDialog.vue
index 183fd5cb..0c8e9cbe 100644
--- a/packages/form/src/FormDialog.vue
+++ b/packages/form/src/FormDialog.vue
@@ -1,53 +1,55 @@
 <template>
-  <teleport to="body">
-    <div class="m-form-dialog" v-show="dialogVisible">
-      <el-dialog
-        v-model="dialogVisible"
-        top="20px"
-        :title="title"
-        :width="width"
-        :fullscreen="fullscreen"
-        :close-on-click-modal="false"
-        @close="closeHandler"
-      >
-        <div class="m-dialog-body" :style="`max-height: ${bodyHeight}; overflow-y: auto; overflow-x: hidden;`">
-          <m-form
-            v-model="stepActive"
-            ref="form"
-            :size="size"
-            :config="config"
-            :init-values="values"
-            :parent-values="parentValues"
-            :label-width="labelWidth"
-            @change="changeHandler"
-          ></m-form>
-          <slot></slot>
-        </div>
-
-        <template #footer>
-          <el-row class="dialog-footer">
-            <el-col :span="12" style="text-align: left">
-              <div style="min-height: 1px">
-                <slot name="left"></slot>
-              </div>
-            </el-col>
-            <el-col :span="12">
-              <slot name="footer">
-                <el-button @click="cancel" size="small">取 消</el-button>
-                <el-button v-if="hasStep && stepActive > 1" type="info" size="small" @click="preStep">上一步</el-button>
-                <el-button v-if="hasStep && stepCount > stepActive" type="info" size="small" @click="nextStep"
-                  >下一步</el-button
-                >
-                <el-button v-else type="primary" size="small" :loading="saveFetch" @click="save">{{
-                  confirmText
-                }}</el-button>
-              </slot>
-            </el-col>
-          </el-row>
-        </template>
-      </el-dialog>
+  <el-dialog
+    v-model="dialogVisible"
+    class="m-form-dialog"
+    top="20px"
+    append-to-body
+    :title="title"
+    :width="width"
+    :fullscreen="fullscreen"
+    :close-on-click-modal="false"
+    @close="closeHandler"
+  >
+    <div
+      v-if="dialogVisible"
+      class="m-dialog-body"
+      :style="`max-height: ${bodyHeight}; overflow-y: auto; overflow-x: hidden;`"
+    >
+      <m-form
+        v-model="stepActive"
+        ref="form"
+        :size="size"
+        :config="config"
+        :init-values="values"
+        :parent-values="parentValues"
+        :label-width="labelWidth"
+        @change="changeHandler"
+      ></m-form>
+      <slot></slot>
     </div>
-  </teleport>
+
+    <template #footer>
+      <el-row class="dialog-footer">
+        <el-col :span="12" style="text-align: left">
+          <div style="min-height: 1px">
+            <slot name="left"></slot>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <slot name="footer">
+            <el-button @click="cancel" size="small">取 消</el-button>
+            <el-button v-if="hasStep && stepActive > 1" type="info" size="small" @click="preStep">上一步</el-button>
+            <el-button v-if="hasStep && stepCount > stepActive" type="info" size="small" @click="nextStep"
+              >下一步</el-button
+            >
+            <el-button v-else type="primary" size="small" :loading="saveFetch" @click="save">{{
+              confirmText
+            }}</el-button>
+          </slot>
+        </el-col>
+      </el-row>
+    </template>
+  </el-dialog>
 </template>
 
 <script lang="ts">