diff --git a/packages/ui-vue/components/designer-canvas/index.ts b/packages/ui-vue/components/designer-canvas/index.ts
index c9435dd29509c5f3ffe30235cf0ac20915e2ab15..43befcbf47d8bc73291d630be287140ce7f948c0 100644
--- a/packages/ui-vue/components/designer-canvas/index.ts
+++ b/packages/ui-vue/components/designer-canvas/index.ts
@@ -1,5 +1,6 @@
 import FDesignerCanvas from './src/designer-canvas.component';
 import FDesignerItem from './src/components/designer-item.component';
+import FDesignerInnerItem from './src/components/designer-inner-item.component';
 import { DgControl } from './src/composition/dg-control';
 import type { DesignerHostService, UseDesignerRules, DesignerHTMLElement, DraggingResolveContext } from './src/composition/types';
 
@@ -11,4 +12,4 @@ export * from './src/composition/rule/use-dragula-common-rule';
 export * from './src/composition/types';
 export * from './src/types';
 
-export { FDesignerCanvas, FDesignerItem, DgControl, UseDesignerRules, DesignerHostService, DesignerHTMLElement, DraggingResolveContext };
+export { FDesignerCanvas, FDesignerItem, DgControl, UseDesignerRules, DesignerHostService, DesignerHTMLElement, DraggingResolveContext, FDesignerInnerItem };
diff --git a/packages/ui-vue/components/designer-canvas/src/components/maps.ts b/packages/ui-vue/components/designer-canvas/src/components/maps.ts
index 966dd0c717040aa3a2d709881b20a8c825e4523e..2bac9ebbff6a294a65c66395a4675b983bd13cc2 100644
--- a/packages/ui-vue/components/designer-canvas/src/components/maps.ts
+++ b/packages/ui-vue/components/designer-canvas/src/components/maps.ts
@@ -54,7 +54,7 @@ import FVideo from '@farris/ui-vue/components/video';
 import FTextArea from '@farris/ui-vue/components/textarea';
 import FTreeGrid from '@farris/ui-vue/components/tree-grid';
 import FFieldset from '@farris/ui-vue/components/fieldset';
-import FDrawer from '@farris/ui-vue/components/drawer';
+import FDrawer from '@farris/ui-vue/components/drawer/designer';
 import FHtmlTemplate from '@farris/ui-vue/components/html-template';
 
 const componentMap: Record<string, any> = {};
diff --git a/packages/ui-vue/components/drawer/designer.ts b/packages/ui-vue/components/drawer/designer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..93490f132cc1a670fd475b901d7d008b394e82cf
--- /dev/null
+++ b/packages/ui-vue/components/drawer/designer.ts
@@ -0,0 +1,39 @@
+ 
+/**
+ * Copyright (c) 2020 - present, Inspur Genersoft Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { createPropsResolver } from '@farris/ui-vue/components/dynamic-resolver';
+import { withInstall } from '@farris/ui-vue/components/common';
+import FDrawer from './src/drawer.component';
+import FDrawerDesign from './src/designer/drawer.design.component';
+import { schemaResolver } from './src/schema/schema-resolver';
+import { schemaMapper } from './src/schema/schema-mapper';
+import drawerSchema from './src/schema/drawer.schema.json';
+import { drawerPropsDesignerProps } from './src/designer/drawer.design.props';
+
+export * from './src/drawer.props';
+
+export const propsResolver = createPropsResolver<typeof drawerPropsDesignerProps>(drawerPropsDesignerProps, drawerSchema, schemaMapper, schemaResolver);
+
+FDrawerDesign.register = (componentMap: Record<string, any>, propsResolverMap: Record<string, any>, configResolverMap: Record<string, any>) => {
+    componentMap['drawer'] = FDrawer;
+    propsResolverMap['drawer'] = propsResolver;
+};
+
+FDrawerDesign.registerDesigner = (componentMap: Record<string, any>, propsResolverMap: Record<string, any>, configResolverMap: Record<string, any>) => {
+    componentMap['drawer'] = FDrawerDesign;
+    propsResolverMap['drawer'] = propsResolver;
+};
+export default withInstall(FDrawerDesign);
diff --git a/packages/ui-vue/components/drawer/index.ts b/packages/ui-vue/components/drawer/index.ts
index b40a1033354bda808e2d35a389cf50de70349903..648212efc152311d44a34c1a98785d2ff6f4b314 100644
--- a/packages/ui-vue/components/drawer/index.ts
+++ b/packages/ui-vue/components/drawer/index.ts
@@ -14,21 +14,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import FDrawer from './src/drawer.component';
-import { propsResolver } from './src/drawer.props';
-import FDrawerDesign from './src/designer/drawer.design.component';
 import { withInstall } from '@farris/ui-vue/components/common';
+import FDrawer from './src/drawer.component';
 
 export * from './src/drawer.props';
-
-FDrawer.register = (componentMap: Record<string, any>, propsResolverMap: Record<string, any>, configResolverMap: Record<string, any>) => {
-    componentMap['drawer'] = FDrawer;
-    propsResolverMap['drawer'] = propsResolver;
-};
-
-FDrawer.registerDesigner = (componentMap: Record<string, any>, propsResolverMap: Record<string, any>, configResolverMap: Record<string, any>) => {
-    componentMap['drawer'] = FDrawerDesign;
-    propsResolverMap['drawer'] = propsResolver;
-};
 export { FDrawer };
 export default withInstall(FDrawer);
diff --git a/packages/ui-vue/components/drawer/src/designer/drawer.design.component.tsx b/packages/ui-vue/components/drawer/src/designer/drawer.design.component.tsx
index 5b3a7aa9bfcd0ad2f23eb74cbc6de09d2afee312..053a7dbcb93047e914abd4053db484070602339c 100644
--- a/packages/ui-vue/components/drawer/src/designer/drawer.design.component.tsx
+++ b/packages/ui-vue/components/drawer/src/designer/drawer.design.component.tsx
@@ -16,15 +16,10 @@
  */
 
 import { defineComponent, ref, inject, onMounted, Teleport, Transition, withModifiers, computed, watch, CSSProperties } from 'vue';
-import { drawerPropsDesignerProps } from '../drawer.props';
-
-import { DesignerItemContext } from '../../../designer-canvas/src/types';
-import { useDesignerComponent } from '../../../designer-canvas/src/composition/function/use-designer-component';
+import { DesignerItemContext, DesignerHostService, useDesignerComponent, FDesignerInnerItem } from '@farris/ui-vue/components/designer-canvas';
+import FResponseToolbarDesignComponent, { responseToolbarResolver } from '@farris/ui-vue/components/response-toolbar';
 import { useDesignerRules } from './use-designer-rules';
-import { DesignerHostService } from '../../../designer-canvas/src/composition/types';
-import { responseToolbarResolver } from '../../../response-toolbar';
-import FResponseToolbarDesignComponent from '../../../response-toolbar/src/designer/response-toolbar.design.component';
-import FDesignerInnerItem from '../../../designer-canvas/src/components/designer-inner-item.component';
+import { drawerPropsDesignerProps } from './drawer.design.props';
 
 export default defineComponent({
     name: 'FDrawerDesign',
diff --git a/packages/ui-vue/components/drawer/src/designer/drawer.design.props.ts b/packages/ui-vue/components/drawer/src/designer/drawer.design.props.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0b63627747905f9e5883bb11c58127483d52052c
--- /dev/null
+++ b/packages/ui-vue/components/drawer/src/designer/drawer.design.props.ts
@@ -0,0 +1,7 @@
+import { ExtractPropTypes } from "vue";
+import { drawerProps } from "../drawer.props";
+
+export const drawerPropsDesignerProps = Object.assign({}, drawerProps, {
+    componentId: { type: String, default: '' }
+});
+export type DrawerDesignerProps = ExtractPropTypes<typeof drawerPropsDesignerProps>;
diff --git a/packages/ui-vue/components/drawer/src/designer/use-designer-rules.ts b/packages/ui-vue/components/drawer/src/designer/use-designer-rules.ts
index 083b618f372c14e13dc75250fdc05b2d39441cf3..c1e399eff4b1155cd20c638c4554089e2769f311 100644
--- a/packages/ui-vue/components/drawer/src/designer/use-designer-rules.ts
+++ b/packages/ui-vue/components/drawer/src/designer/use-designer-rules.ts
@@ -1,6 +1,4 @@
-import { DesignerHostService, UseDesignerRules } from "../../../designer-canvas/src/composition/types";
-import { DesignerItemContext } from "../../../designer-canvas/src/types";
-import { UseTemplateDragAndDropRules } from "../../../designer-canvas/src/composition/rule/use-template-rule";
+import { UseTemplateDragAndDropRules, DesignerItemContext, DesignerHostService, UseDesignerRules } from "@farris/ui-vue/components/designer-canvas";
 import { DrawerProperty } from "../property-config/drawer.property-config";
 
 export function useDesignerRules(designItemContext: DesignerItemContext, designerHostService?: DesignerHostService): UseDesignerRules {
diff --git a/packages/ui-vue/components/drawer/src/drawer.component.tsx b/packages/ui-vue/components/drawer/src/drawer.component.tsx
index 26103150a1ee2b3b98866875fe3db478cce58e7e..ff64f33d2763e1df335bcbf3d59ecce5000dcb5f 100644
--- a/packages/ui-vue/components/drawer/src/drawer.component.tsx
+++ b/packages/ui-vue/components/drawer/src/drawer.component.tsx
@@ -28,6 +28,23 @@ export default defineComponent({
 
         const modelValue = ref(props.modelValue);
 
+        // const host = computed(() => {
+        //     if (typeof props.host === 'string') {
+        //         const container = document.querySelector(props.host);
+        //         return container;
+        //     }
+        //     return props.host;
+        // });
+        const drawerContainerClass = computed(() => {
+            const showNotInBody = typeof props.host === 'string' ? props.host !== 'body' :
+            document.querySelector(props.host) !== document.body;
+            return {
+                'f-drawer': true,
+                // 在某个DOM内部打开抽屉
+                'f-drawer-inline': showNotInBody
+            };
+        });
+
         const wrapperClassObject = computed(() => {
             return {
 
@@ -102,21 +119,21 @@ export default defineComponent({
 
         return () => {
             return (
-                <Teleport to="body">
-                    <div class="f-drawer">
+                <Teleport to={props.host}>
+                    <div class={drawerContainerClass.value}>
                         <Transition name="f-drawer-mask" appear>
                             {modelValue.value && <div class={maskClass.value} onClick={withModifiers((e: any) => {
                                 props.allowClickMaskToClose && onClose(e as MouseEvent);
                             }, ['stop'])}></div>}
                         </Transition>
-                        <Transition name={transitionName.value} appear>
-                            {modelValue.value &&
+                        <Transition name={transitionName.value}>
+                            
                                 <div
                                     class={drawerClass.value} style={{
                                         width: width.value,
                                         height: height.value,
                                         backgroundColor: props.backgroundColor
-                                    }}>
+                                    }} v-show={modelValue.value}>
                                     <div class="f-drawer-container">
                                         <div class="f-drawer-header">
                                             <div class="f-drawer-title">
@@ -144,7 +161,7 @@ export default defineComponent({
                                             }
                                         </div>
                                     </div>
-                                </div>}
+                                </div>
                         </Transition>
                     </div>
                 </Teleport>
diff --git a/packages/ui-vue/components/drawer/src/drawer.css b/packages/ui-vue/components/drawer/src/drawer.css
index 342036c3427e7b8ca33a97447f5de0d48af795cb..11acd12529f3a1de5c5d391337c0231569dc3508 100644
--- a/packages/ui-vue/components/drawer/src/drawer.css
+++ b/packages/ui-vue/components/drawer/src/drawer.css
@@ -1,9 +1,12 @@
 .f-drawer {
-    position: absolute;
+    position: fixed;
     z-index: 1000;
     inset: 0;
     pointer-events: none;
 }
+.f-drawer.f-drawer-inline {
+    position: absolute;
+}
 .f-drawer-container {
     display: flex;
     flex-direction: column;
diff --git a/packages/ui-vue/components/drawer/src/drawer.props.ts b/packages/ui-vue/components/drawer/src/drawer.props.ts
index 8776e2e8ed03d4efddc75fe491d3cf5c55ea1542..56a30365150bf98a84e027c32dc8812b804adf6f 100644
--- a/packages/ui-vue/components/drawer/src/drawer.props.ts
+++ b/packages/ui-vue/components/drawer/src/drawer.props.ts
@@ -15,10 +15,6 @@
  * limitations under the License.
  */
 import { ExtractPropTypes, PropType } from 'vue';
-import { createPropsResolver } from '../../dynamic-resolver';
-import { schemaResolver } from './schema/schema-resolver';
-import { schemaMapper } from './schema/schema-mapper';
-import drawerSchema from './schema/drawer.schema.json';
 
 export const drawerProps = {
     /** 背景色 */
@@ -54,14 +50,11 @@ export const drawerProps = {
     /** 标题 */
     title: { type: String, default: '' },
     /** 宽度 */
-    width: { type: String as PropType<number | string>, default: 300 }
+    width: { type: String as PropType<number | string>, default: 300 },
+    /**
+     * 渲染的DOM容器
+     */
+    host: { type: Object as PropType<string | HTMLElement>, default: 'body' }
 } as Record<string, any>;
 
 export type DrawerProps = ExtractPropTypes<typeof drawerProps>;
-
-export const drawerPropsDesignerProps=Object.assign({}, drawerProps, {
-    componentId: { type: String, default: '' }
-});
-export type DrawerDesignerProps = ExtractPropTypes<typeof drawerPropsDesignerProps>;
-
-export const propsResolver = createPropsResolver<typeof drawerPropsDesignerProps>(drawerPropsDesignerProps, drawerSchema, schemaMapper, schemaResolver);
diff --git a/packages/ui-vue/components/drawer/src/property-config/drawer.property-config.ts b/packages/ui-vue/components/drawer/src/property-config/drawer.property-config.ts
index 596b322605f0b45ba14b863c7143b69879d7f0cc..3e01edb9d4daa18d1c537e7378b34ebb245bcb35 100644
--- a/packages/ui-vue/components/drawer/src/property-config/drawer.property-config.ts
+++ b/packages/ui-vue/components/drawer/src/property-config/drawer.property-config.ts
@@ -1,4 +1,4 @@
-import { BaseControlProperty } from "../../../property-panel/src/composition/entity/base-property";
+import { BaseControlProperty } from "@farris/ui-vue/components/property-panel";
 
 export class DrawerProperty extends BaseControlProperty {
     constructor(componentId: string, designerHostService: any) {
diff --git a/packages/ui-vue/components/drawer/src/schema/schema-mapper.ts b/packages/ui-vue/components/drawer/src/schema/schema-mapper.ts
index 97964aee23bbb8b523c7692723ea02db00d4f4c0..2ca33ca080647b9edc66a133396282d6a3b1698f 100644
--- a/packages/ui-vue/components/drawer/src/schema/schema-mapper.ts
+++ b/packages/ui-vue/components/drawer/src/schema/schema-mapper.ts
@@ -1,4 +1,4 @@
-import { MapperFunction, resolveAppearance } from '../../../dynamic-resolver';
+import { MapperFunction, resolveAppearance } from '@farris/ui-vue/components/dynamic-resolver';
 
 export const schemaMapper = new Map<string, string | MapperFunction>([
     ['appearance', resolveAppearance]
diff --git a/packages/ui-vue/components/drawer/src/schema/schema-resolver.ts b/packages/ui-vue/components/drawer/src/schema/schema-resolver.ts
index b02bdf93eec9060948f579c53aa81e3963a7d706..d36ae7457434b7381b796814e9926d352feacff6 100644
--- a/packages/ui-vue/components/drawer/src/schema/schema-resolver.ts
+++ b/packages/ui-vue/components/drawer/src/schema/schema-resolver.ts
@@ -1,4 +1,4 @@
-import { DynamicResolver } from "../../../dynamic-resolver";
+import { DynamicResolver } from "@farris/ui-vue/components/dynamic-resolver";
 
 export function schemaResolver(resolver: DynamicResolver, schema: Record<string, any>, context: Record<string, any>): Record<string, any> {
     return schema;
diff --git a/packages/ui-vue/components/dynamic-view/src/components/maps.ts b/packages/ui-vue/components/dynamic-view/src/components/maps.ts
index c4da05aed6981af64f7367bc4f293ac8eeb538c0..0e8a427200d3fd149ef6e45bdfbe46d4aeffe654 100644
--- a/packages/ui-vue/components/dynamic-view/src/components/maps.ts
+++ b/packages/ui-vue/components/dynamic-view/src/components/maps.ts
@@ -63,7 +63,7 @@ import FFilterConditionEditor from '@farris/ui-vue/components/filter-condition-e
 import FFieldset from '@farris/ui-vue/components/fieldset';
 import FSortConditionEditor from '@farris/ui-vue/components/sort-condition-editor';
 import FMenuLookup from '@farris/ui-vue/components/menu-lookup';
-import FDrawer from '@farris/ui-vue/components/drawer';
+import FDrawer from '@farris/ui-vue/components/drawer/designer';
 import FJsonEditor from '@farris/ui-vue/components/json-editor';
 import FPropertyEditor from '@farris/ui-vue/components/property-editor';
 import FExpressionEditor from '@farris/ui-vue/components/expression-editor';
diff --git a/packages/ui-vue/components/modal/src/composition/type.ts b/packages/ui-vue/components/modal/src/composition/type.ts
index 7fcca8f0a585c9272d115f0129b6f247475fc154..0512b650a55889d704f5a943897d06ac06195aff 100644
--- a/packages/ui-vue/components/modal/src/composition/type.ts
+++ b/packages/ui-vue/components/modal/src/composition/type.ts
@@ -40,6 +40,7 @@ export interface ModalOptions {
     enableEsc?: boolean;
     dialogType?: string;
     src?: string;
+    host?: string | HTMLElement;
 }
 
 export interface ModalFunctions {
diff --git a/packages/ui-vue/components/modal/src/modal.component.tsx b/packages/ui-vue/components/modal/src/modal.component.tsx
index e194c8e7824eb92f4e401d0a0cba3a8836745f9c..8cf6c374250e7fd692e289d9ac3ef53c51fb3b25 100644
--- a/packages/ui-vue/components/modal/src/modal.component.tsx
+++ b/packages/ui-vue/components/modal/src/modal.component.tsx
@@ -122,7 +122,7 @@ export default defineComponent({
         watch(() => props.modelValue, (newValue, oldValue) => {
             if (newValue !== oldValue) {
                 modelValue.value = newValue;
-                if(modelValue.value && props.draggable) {
+                if (modelValue.value && props.draggable) {
                     // 等待DOM挂载后，注册拖拽handler
                     nextTick(() => {
                         if (modalElementRef.value && !containment.value) {
@@ -133,7 +133,7 @@ export default defineComponent({
                     });
                 }
                 if (!newValue) {
-                    if(containment.value){
+                    if (containment.value) {
                         containment.value = null;
                     }
                     removeModalOpenStyle();
@@ -221,7 +221,7 @@ export default defineComponent({
             const styleObject: any = {
                 display: 'block'
             };
-            if(!props.mask) {
+            if (!props.mask) {
                 styleObject.pointerEvents = 'none';
                 styleObject.backgroundColor = 'transparent';
             }
@@ -449,13 +449,20 @@ export default defineComponent({
             </div>;
         }
 
+        function getHost(host: string | HTMLElement | undefined) {
+            if (!host) {
+                return 'body';
+            }
+            return host;
+        }
+
         return () => {
             return (
-                <Teleport to="body">
+                <Teleport to={getHost(props.host)}>
                     {showModal.value &&
                         <Transition name="fade" appear>
-                            <div 
-                                ref={modalContainerRef} 
+                            <div
+                                ref={modalContainerRef}
                                 class={modalContainerClass.value}
                                 style={modalBackdropStyle.value}
                                 onClick={onClickModalBackdrop}
diff --git a/packages/ui-vue/components/modal/src/modal.props.ts b/packages/ui-vue/components/modal/src/modal.props.ts
index b94bc6cd17b198335833fb2a800f6083b954168a..92272db84605dea7796c82f7827ccddf614c7670 100644
--- a/packages/ui-vue/components/modal/src/modal.props.ts
+++ b/packages/ui-vue/components/modal/src/modal.props.ts
@@ -96,7 +96,8 @@ export const modalProps = {
     enableEnter: { type: Boolean, default: false },
     dialogType: { type: String, default: '' },
     src: { type: String, default: '' },
-    footerHeight: { type: Number, default: 60 }
+    footerHeight: { type: Number, default: 60 },
+    host: { type: Object as PropType<DragHandleType>, default: 'body' }
 };
 
 export type ModalProps = Partial<ExtractPropTypes<typeof modalProps>>;
diff --git a/packages/ui-vue/demos/drawer/host.vue b/packages/ui-vue/demos/drawer/host.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a06f422ddf5b4b02af955db8f8fb8c8d7979ccf6
--- /dev/null
+++ b/packages/ui-vue/demos/drawer/host.vue
@@ -0,0 +1,22 @@
+<template>
+    <div class="custom-drawer" style="border:1px solid #000;width: 400px;height: 300px;
+    background-color: rgba(0,0,0,.3);position:relative;overflow: hidden;">
+        
+    </div>
+    <f-button @click="openDrawer">打开抽屉</f-button>
+        <f-drawer host=".custom-drawer" v-model="open" title="某个DOM内部打开抽屉">
+            <template #content> 右侧打开内容如下：我是一个抽屉组件 </template>
+            <template #footerTemplate>
+                <f-button>确定</f-button>
+            </template>
+        </f-drawer>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const open = ref(false)
+
+const openDrawer = () => {
+    open.value = true
+}
+</script>
diff --git a/packages/ui-vue/demos/modal/host.vue b/packages/ui-vue/demos/modal/host.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2d475fc650b8d85323bf303d645ec181c09f6ec8
--- /dev/null
+++ b/packages/ui-vue/demos/modal/host.vue
@@ -0,0 +1,27 @@
+<script setup lang="tsx">
+
+import { inject } from 'vue';
+import { F_MODAL_SERVICE_TOKEN } from '../../components/modal';
+
+const modalService = inject(F_MODAL_SERVICE_TOKEN) as any;
+function renderComponent() {
+    return () => (<><h2 class="m-3 pt-5" style="text-align:center;font-size: 36px;"> 自定义模态框容器 </h2></>);
+}
+function openModal() {
+    modalService.open({
+        host:'.custom-modal-container',
+        fitContent: false,
+        width: 800,
+        height: 600,
+        draggable: true,
+        title: '自定义尺寸',
+        render: renderComponent()
+    });
+}
+
+</script>
+<template>
+    <div class="custom-modal-container" style="padding: 20px">Modal Content
+        <f-button @click="openModal">弹出窗口</f-button>
+    </div>
+</template>
diff --git a/packages/ui-vue/docs/components/drawer/index.md b/packages/ui-vue/docs/components/drawer/index.md
index 467e42b1570413bca8ad0d16f55d5c006745c00f..2248612ffd07678bc20d0c548cb70766db3018fd 100644
--- a/packages/ui-vue/docs/components/drawer/index.md
+++ b/packages/ui-vue/docs/components/drawer/index.md
@@ -21,7 +21,7 @@
 
 :::
 
-## 显示入口
+<!-- ## 显示入口
 
 :::vdemo
 
@@ -29,6 +29,16 @@
 {demos/drawer/showEntry.vue}
 ```
 
+::: -->
+
+## 渲染在DOM内
+
+:::vdemo
+
+```vue
+{demos/drawer/host.vue}
+```
+
 :::
 
 ## 属性
diff --git a/packages/ui-vue/docs/components/modal/index.md b/packages/ui-vue/docs/components/modal/index.md
index 482510004489451c646450ccfdfb1ab7edc1c5fa..c7a67720412fe9439cff528dc1a39370cb9bc093 100644
--- a/packages/ui-vue/docs/components/modal/index.md
+++ b/packages/ui-vue/docs/components/modal/index.md
@@ -92,6 +92,16 @@ Modal 组件用来已弹出模态窗口的形式展示页面内容。
 
 :::
 
+## 自定义host
+
+:::vdemo
+
+```vue
+{demos/modal/host.vue}
+```
+
+:::
+
 ## 类型
 
 ```typescript