feat(components): [dialog] append dialog to any element (#14317)

* feat(components): [dialog] append dialog to any element

Add the ability to append dialog not just to body, but to any element

* fix(components): [dialog] fix appending to body when append-to is used

* docs(components): [dialog] add version to docs append-to attribute

docs/en-US/component/dialog.md

@@ -125,6 +125,7 @@ When using `modal` = false, please make sure that `append-to-body` was set to **
 | modal                      | whether a mask is displayed                                                                          | ^[boolean]                          | true    |
 | modal-class                | custom class names for mask                                                                          | ^[string]                           | —       |
 | append-to-body             | whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true`    | ^[boolean]                          | false   |
+| append-to ^(2.4.3)         | which element the Dialog appends to. Will override `append-to-body`                                  | ^[string]                           | body    |
 | lock-scroll                | whether scroll of body is disabled while Dialog is displayed                                         | ^[boolean]                          | true    |
 | custom-class ^(deprecated) | custom class names for Dialog                                                                        | ^[string]                           | ''      |
 | open-delay                 | the Time(milliseconds) before open                                                                   | ^[number]                           | 0       |

packages/components/dialog/src/dialog.ts

@@ -13,6 +13,13 @@ export const dialogProps = buildProps({
    * @description whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true`
    */
   appendToBody: Boolean,
+  /**
+   * @description which element the Dialog appends to
+   */
+  appendTo: {
+    type: definePropType<string>(String),
+    default: 'body',
+  },
   /**
    * @description callback before Dialog closes, and it will prevent Dialog from closing, use done to close the dialog
    */

packages/components/dialog/src/dialog.vue

@@ -1,5 +1,8 @@
 <template>
-  <teleport to="body" :disabled="!appendToBody">
+  <teleport
+    :to="appendTo"
+    :disabled="appendTo !== 'body' ? false : !appendToBody"
+  >
     <transition
       name="dialog-fade"
       @after-enter="afterEnter"