feat: add appendTo prop to DropdownMenu (#137)

Author: gene9831

docs/demos/dropdown-menu/basic.vue

@@ -18,7 +18,12 @@
   </TrDropdownMenu>
   <hr />
   <div style="display: flex; gap: 10px">
-    <TrDropdownMenu :items="dropdownMenuItems" trigger="hover" @item-click="(item) => console.log(item)">
+    <TrDropdownMenu
+      :items="dropdownMenuItems"
+      trigger="hover"
+      @item-click="(item) => console.log(item)"
+      append-to="#app"
+    >
       <template #trigger>
         <TrSuggestionPillButton> Trigger 为 hover </TrSuggestionPillButton>
       </template>

docs/src/components/dropdown-menu.md

@@ -18,11 +18,12 @@ outline: deep
 
 下拉菜单属性配置。
 
-| 属性      | 类型                             | 默认值    | 说明                                            |
-| --------- | -------------------------------- | --------- | ----------------------------------------------- |
-| `items`   | `DropdownMenuItem[]`             | -         | **必填**，菜单项数据数组                        |
-| `show`    | `boolean`                        | -         | 是否显示菜单（仅在 trigger 为 'manual' 时有效） |
-| `trigger` | `'click' \| 'hover' \| 'manual'` | `'click'` | 触发方式：点击、悬停或手动控制                  |
+| 属性       | 类型                             | 默认值                            | 说明                                              |
+| ---------- | -------------------------------- | --------------------------------- | ------------------------------------------------- |
+| `appendTo` | `string \| HTMLElement`          | `'body'` 或者 shadow dom 的根节点 | 菜单挂载的目标容器                                |
+| `items`    | `DropdownMenuItem[]`             | -                                 | **必填**，菜单项数据数组                          |
+| `show`     | `boolean`                        | -                                 | 是否显示菜单，仅在 `trigger` 为 `'manual'` 时有效 |
+| `trigger`  | `'click' \| 'hover' \| 'manual'` | `'click'`                         | 菜单触发方式：点击、悬停或手动控制                |
 
 ### Slots
 
@@ -36,21 +37,21 @@ outline: deep
 
 下拉菜单事件定义。
 
-| 事件名          | 参数                     | 说明                                                                 |
-| --------------- | ------------------------ | -------------------------------------------------------------------- |
-| `item-click`    | `item: DropdownMenuItem` | 点击菜单项时触发                                                     |
-| `click-outside` | `event: MouseEvent`      | 点击菜单外部区域时触发（仅在 trigger 为 'click' 或 'manual' 时有效） |
+| 事件名          | 参数                     | 说明                                                                       |
+| --------------- | ------------------------ | -------------------------------------------------------------------------- |
+| `item-click`    | `item: DropdownMenuItem` | 点击菜单项时触发                                                           |
+| `click-outside` | `event: MouseEvent`      | 点击菜单外部区域时触发（仅在 `trigger` 为 `'click'` 或 `'manual'` 时有效） |
 
 ### Types
 
 #### DropdownMenuItem
 
 菜单项数据结构。
 
-| 属性   | 类型     | 说明       |
-| ------ | -------- | ---------- |
-| `id`   | `string` | 项唯一标识 |
-| `text` | `string` | 显示文本   |
+| 属性   | 类型     | 说明           |
+| ------ | -------- | -------------- |
+| `id`   | `string` | 菜单项唯一标识 |
+| `text` | `string` | 菜单项显示文本 |
 
 ### CSS Variables
 

packages/components/src/base-popper/index.vue

@@ -23,6 +23,7 @@ type TriggerEvents = Partial<Record<`on${Capitalize<string>}`, (...args: any[])
 
 const props = withDefaults(
   defineProps<{
+    appendTo?: string | HTMLElement
     offset?: number | { mainAxis?: number; crossAxis?: number }
     placement?: 'top-center' | 'bottom-center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
     preventOverflow?: boolean
@@ -179,7 +180,7 @@ defineExpose({
     v-bind="indexedEventHandlers[index]"
   />
   <Transition v-bind="transitionProps">
-    <Teleport v-if="show" :to="teleportTarget">
+    <Teleport v-if="show" :to="props.appendTo || teleportTarget">
       <div class="tr-base-popper" ref="popperRef" :style="popperStyles" v-bind="$attrs">
         <slot name="content" />
       </div>

packages/components/src/dropdown-menu/index.type.ts

@@ -6,6 +6,7 @@ export interface DropdownMenuItem {
 }
 
 export interface DropdownMenuProps {
+  appendTo?: string | HTMLElement
   items: DropdownMenuItem[]
   /**
    * 是否显示菜单，仅在 trigger 为 'manual' 时有效

packages/components/src/dropdown-menu/index.vue

@@ -75,6 +75,7 @@ const handleItemClick = (item: DropdownMenuItem) => {
     class="tr-dropdown-menu"
     ref="basePopperRef"
     placement="top-left"
+    :append-to="props.appendTo"
     :offset="8"
     :transition-props="{ name: 'tr-dropdown-menu' }"
     :prevent-overflow="true"