diff --git a/packages/devui-vue/devui/drawer/src/components/drawer-body.scss b/packages/devui-vue/devui/drawer/src/components/drawer-body.scss
new file mode 100644
index 0000000000000000000000000000000000000000..707fae38018469c198fbfa5a3d57320700f01b3d
--- /dev/null
+++ b/packages/devui-vue/devui/drawer/src/components/drawer-body.scss
@@ -0,0 +1,43 @@
+@import '../../../style/devui.scss';
+
+.devui-drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+}
+
+.devui-overlay-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100vw;
+}
+
+.devui-overlay-backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: $devui-shadow;
+  width: 100vw;
+  height: 100vh;
+}
+
+.devui-drawer-nav {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  border-radius: $devui-border-radius;
+  background: $devui-base-bg;
+}
+
+.devui-drawer-content {
+  border-radius: $devui-border-radius;
+  overflow: auto;
+  box-shadow: $devui-shadow-length-fullscreen-overlay $devui-shadow;
+  padding: 20px;
+  height: 100vh;
+}
\ No newline at end of file
diff --git a/packages/devui-vue/devui/drawer/src/components/drawer-body.tsx b/packages/devui-vue/devui/drawer/src/components/drawer-body.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..00d64fee17f480050ef4229820b6373fe31ecdac
--- /dev/null
+++ b/packages/devui-vue/devui/drawer/src/components/drawer-body.tsx
@@ -0,0 +1,53 @@
+import { defineComponent, inject, computed, toRefs, onUnmounted } from 'vue'
+
+import './drawer-body.scss'
+
+export default defineComponent({
+  name: 'DrawerBody',
+  setup(props, { slots }) {
+    const isFullScreen: any = inject('isFullScreen')
+    const closeDrawer: any = inject('closeDrawer')
+    const zindex: number = inject('zindex')
+    const isCover: boolean = inject('isCover')
+    const position: any = inject('position')
+    const width: any = inject('width')
+    const visible: boolean = inject('visible')
+
+    const navRight = computed(() => position.value === 'right' ? { 'right': 0 } : { 'left': 0 })
+    const navWidth = computed(() => isFullScreen.value ? '100vw' : width.value)
+
+    let clickContent = (e) => {
+      e.stopPropagation()
+    }
+
+    return {
+      closeDrawer,
+      zindex,
+      slots,
+      isCover,
+      navRight,
+      navWidth,
+      visible,
+      clickContent,
+    }
+  },
+
+  render() {
+    const { zindex, closeDrawer, slots, isCover, navRight, navWidth, visible } = this
+
+    if (!visible) return null
+
+    return (
+      <div class="devui-drawer" style={{ zIndex: zindex }} onClick={closeDrawer} >
+        {isCover ? <div class="devui-overlay-backdrop" /> : null}
+        <div class="devui-overlay-wrapper">
+          <div class="devui-drawer-nav" style={{ 'width': navWidth, ...navRight }}>
+            <div class="devui-drawer-content" onClick={this.clickContent}>
+              {slots.default ? slots.default() : null}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+})
\ No newline at end of file
diff --git a/packages/devui-vue/devui/drawer/src/components/drawer-container.tsx b/packages/devui-vue/devui/drawer/src/components/drawer-container.tsx
index ea3202458bbc6daae7765013db674e41a1478c29..c45f3b25456a9197aa6164b1a6d5735d60cdc3cc 100644
--- a/packages/devui-vue/devui/drawer/src/components/drawer-container.tsx
+++ b/packages/devui-vue/devui/drawer/src/components/drawer-container.tsx
@@ -1,8 +1,14 @@
-import { defineComponent } from 'vue'
+import { defineComponent, inject } from 'vue'
 
 export default defineComponent({
   name: 'DrawerContainer',
+  setup() {
+    const visible = inject('visible')
+    return { visible }
+  },
   render() {
+    const { visible } = this
+    if (!visible) return null
     return <div>内容区域</div>
   }
 })
\ No newline at end of file
diff --git a/packages/devui-vue/devui/drawer/src/components/drawer-header-type.ts b/packages/devui-vue/devui/drawer/src/components/drawer-header-type.ts
deleted file mode 100644
index c76ce1c22bb7946ebef2412407165ec70f4006cf..0000000000000000000000000000000000000000
--- a/packages/devui-vue/devui/drawer/src/components/drawer-header-type.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { ExtractPropTypes} from 'vue'
-
-export const drawerHeaderType = {
-
-} as const
-
-export type DrawerHeaderType = ExtractPropTypes<typeof drawerHeaderType>
diff --git a/packages/devui-vue/devui/drawer/src/components/drawer-header.tsx b/packages/devui-vue/devui/drawer/src/components/drawer-header.tsx
index 6866744bd0ccf0c9176d2745b2f62b23aa5f9342..8db4bec7e95cf1c1dc50db7b833526fa26dbe1e1 100644
--- a/packages/devui-vue/devui/drawer/src/components/drawer-header.tsx
+++ b/packages/devui-vue/devui/drawer/src/components/drawer-header.tsx
@@ -1,30 +1,33 @@
-import { defineComponent, ref } from 'vue'
-import { drawerHeaderType, DrawerHeaderType } from './drawer-header-type';
+import { defineComponent, ref, inject, computed, onUnmounted } from 'vue'
 
 import './drawer-header.scss'
 
 export default defineComponent({
   name: 'DrawerHeader', // 头部
-  props: drawerHeaderType,
   emits: ['toggleFullScreen', 'close'],
-  setup(props: DrawerHeaderType, ctx) {
-    const isFullScreen = ref<boolean>(false);
+  setup(props, ctx) {
+    const isFullScreen = ref(false)
+
+    const visible: boolean = inject('visible')
+
+    const fullScreenClassName = computed(() =>  isFullScreen.value ? 'icon icon-minimize' : 'icon icon-maxmize')
 
     const handleFullScreen = (e) => {
-      e.stopPropagation();
-      isFullScreen.value = !isFullScreen.value;
-      ctx.emit('toggleFullScreen');
+      e.stopPropagation()
+      isFullScreen.value = !isFullScreen.value
+      ctx.emit('toggleFullScreen')
     }
 
     const handleDrawerClose = () => {
       ctx.emit('close')
     }
 
-    return { isFullScreen, handleFullScreen, handleDrawerClose }
+    return { fullScreenClassName, visible, handleFullScreen, handleDrawerClose, }
   },
   render() {
-    const { handleFullScreen, handleDrawerClose } = this
-    const isFullScreen: string = this.isFullScreen ? 'icon icon-minimize' : 'icon icon-maxmize'
+    const { handleFullScreen, handleDrawerClose, visible, fullScreenClassName } = this
+    
+    if (!visible) return null
 
     return (
       <div class="devui-drawer-header">
@@ -32,7 +35,7 @@ export default defineComponent({
           <span class="devui-drawer-header-item icon icon-more-operate" />
         </div>
         <div class="devui-drawer-header-item" onClick={handleFullScreen}>
-          <span class={isFullScreen}/>
+          <span class={fullScreenClassName}/>
         </div>
         <div class="devui-drawer-header-item" onClick={handleDrawerClose}>
           <span class="icon icon-close" />
diff --git a/packages/devui-vue/devui/drawer/src/drawer.scss b/packages/devui-vue/devui/drawer/src/drawer.scss
index 43b2615cf098bb588cfdf62fea1924f44b5c2f33..8b137891791fe96927ad78e64b0aad7bded08bdc 100644
--- a/packages/devui-vue/devui/drawer/src/drawer.scss
+++ b/packages/devui-vue/devui/drawer/src/drawer.scss
@@ -1,43 +1 @@
-@import '../../style/devui.scss';
 
-.devui-drawer {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100vh;
-}
-
-.devui-overlay-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 100vw;
-}
-
-.devui-overlay-backdrop {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: $devui-shadow;
-  width: 100vw;
-  height: 100vh;
-}
-
-.devui-drawer-nav {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  border-radius: $devui-border-radius;
-  background: $devui-base-bg;
-}
-
-.devui-drawer-content {
-  border-radius: $devui-border-radius;
-  overflow: auto;
-  box-shadow: $devui-shadow-length-fullscreen-overlay $devui-shadow;
-  padding: 20px;
-  height: 100vh;
-}
diff --git a/packages/devui-vue/devui/drawer/src/drawer.tsx b/packages/devui-vue/devui/drawer/src/drawer.tsx
index c4af5fb47ee5d88e561042f8a38b1d175c954b31..3b2be3ff4b2d239fc84d274d84e8293d861f2fdf 100644
--- a/packages/devui-vue/devui/drawer/src/drawer.tsx
+++ b/packages/devui-vue/devui/drawer/src/drawer.tsx
@@ -1,81 +1,78 @@
-import { defineComponent, ref, toRefs, watch, computed } from 'vue'
+import { defineComponent, ref, toRefs, watch, onUnmounted, Teleport, provide } from 'vue'
 import { drawerProps, DrawerProps } from './drawer-types'
 
 import DrawerHeader from './components/drawer-header'
 import DrawerContainer from './components/drawer-container'
-
-import './drawer.scss'
+import DrawerBody from './components/drawer-body'
 
 export default defineComponent({
   name: 'DDrawer',
   props: drawerProps,
   emits: ['close', 'update:visible', 'afterOpened'],
   setup(props: DrawerProps, { emit, slots }) {
-    const { width, visible, zIndex, isCover, escKeyCloseable, position } = toRefs(props); // 宽度
-    const isFullScreen = ref(false);
-
-    const navWidth = computed(() => isFullScreen.value ? '100vw' : width.value );
-    const navRight = computed(() => position.value === 'right' ? { 'right': 0 } : {'left' : 0} );
+    const { width, visible, zIndex, isCover, escKeyCloseable, position } = toRefs(props) // 宽度
+    let isFullScreen = ref(false)
 
     const fullScreenEvent = () => {
-      isFullScreen.value = !isFullScreen.value;
+      isFullScreen.value = !isFullScreen.value
     }
 
     const closeDrawer = () => {
-      emit('update:visible', false);
-      emit('close');
+      emit('update:visible', false)
+      emit('close')
     }
 
     const escCloseDrawer = (e) => {
       if (e.code === 'Escape') {
-        emit('update:visible', false);
+        closeDrawer()
       }
     }
 
     watch(visible, (val) => {
       if (val) {
-        emit('afterOpened');
+        emit('afterOpened')
+        isFullScreen.value = false
       }
       if (escKeyCloseable && val) {
-        document.addEventListener('keyup', escCloseDrawer);
+        document.addEventListener('keyup', escCloseDrawer)
       } else {
-        document.removeEventListener('keyup', escCloseDrawer);
+        document.removeEventListener('keyup', escCloseDrawer)
       }
-    })    
+    })
+
+    provide('closeDrawer', closeDrawer)
+    provide('zindex', zIndex)
+    provide('isCover', isCover)
+    provide('position', position)
+    provide('width', width)
+    provide('visible', visible)
+    provide('isFullScreen', isFullScreen)
+
+    onUnmounted(() => {
+      document.removeEventListener('keyup', escCloseDrawer)
+    })
 
     return {
-      zIndex,
       isFullScreen,
-      navWidth,
       visible,
       slots,
-      isCover,
-      navRight,
       fullScreenEvent,
-      closeDrawer, 
-    };
+      closeDrawer,
+    }
   },
   render() {
-    const zindex: number = this.zIndex;
-    const fullScreenEvent: any = this.fullScreenEvent;
-    const closeDrawer: any = this.closeDrawer;
-    const isCover: boolean = this.isCover;
-    const navRight: Record<string, unknown> = this.navRight;
+    const fullScreenEvent: any = this.fullScreenEvent
+    const closeDrawer: any = this.closeDrawer
 
-    if (!this.visible) return;
+    if (!this.visible) return null
 
     return (
-      <div class="devui-drawer" style={{ zIndex: zindex }} onClick={ closeDrawer }>
-        {isCover ? <div class="devui-overlay-backdrop"/>: ''}
-        <div class="devui-overlay-wrapper">
-          <div class="devui-drawer-nav" style={{ 'width': this.navWidth, ...navRight}}>
-            <div class="devui-drawer-content">
-              <DrawerHeader onToggleFullScreen={fullScreenEvent} onClose={closeDrawer} />
-              <div> { this.slots.default ? this.slots.default() : <DrawerContainer/>} </div>
-            </div>
-          </div>
-        </div>
-      </div>
+      <Teleport to="body">
+        <DrawerBody>
+          <DrawerHeader onToggleFullScreen={fullScreenEvent} onClose={closeDrawer} />
+          {this.slots.default ? this.slots.default() : <DrawerContainer />}
+        </DrawerBody>
+      </Teleport>
     )
   }
 })
diff --git a/packages/devui-vue/docs/components/drawer/index.md b/packages/devui-vue/docs/components/drawer/index.md
index 51f64f2f11b91f84dad04de4ea526e60744391de..55e0bd5aebe3ae82a1ce528afceeff0db013c35f 100644
--- a/packages/devui-vue/docs/components/drawer/index.md
+++ b/packages/devui-vue/docs/components/drawer/index.md
@@ -17,9 +17,11 @@
 ```vue
 <template>
   <d-button  @click="drawerShow"> drawer {{ btnName }} </d-button>
-  <d-drawer 
+  <d-drawer
+    v-if="isDrawerShow"
     v-model:visible="isDrawerShow" 
-    :width="drawerWidth" 
+    :width="drawerWidth"
+    :isCover="isCover" 
     position="right"
     @close="drawerClose"
     @afterOpened="drawerAfterOpened"
@@ -33,6 +35,7 @@ export default ({
     let isDrawerShow = ref(false)
     let btnName = ref('close')
     let drawerWidth = ref('15vw')
+    let isCover = ref(true)
 
     const drawerShow = () => {
       isDrawerShow.value = true
@@ -44,7 +47,7 @@ export default ({
     }
 
     const drawerAfterOpened = () => {
-      console.log('open');
+      console.log('open')
     }
 
     return {
@@ -54,6 +57,7 @@ export default ({
       drawerShow,
       drawerClose,
       drawerAfterOpened,
+      isCover,
     }
   }
 })
@@ -66,9 +70,10 @@ export default ({
 
 | 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
 | :---------: | :------: | :-------: | :----------------------- | --------------------------------- |
-| visible | `Boolean` | `false` | 必选，设置抽屉板是否可见 | [基本用法](#基本用法) |
+| v-model:visible | `Boolean` | `false` | 必选，设置抽屉板是否可见 | [基本用法](#基本用法) |
 | width | `String` | `300px` | 可选，设置抽屉板宽度 | [基本用法](#基本用法) |
-| zIndex | `Number` | `1000` | 1000 | [基本用法](#基本用法) |
+| zIndex | `Number` | `1000` | 可选，设置 drawer 的 z-index 值 | [基本用法](#基本用法) |
+| isCover | `Boolean` | `true` | 可选，是否有遮罩层 | [基本用法](#基本用法) |
 | onClose | `Function` | -- | 可选，关闭 drawer 时候调用 | [基本用法](#基本用法) |
 | escKeyCloseable | `Boolean` | `true` | 可选，设置可否通过 esc 按键来关闭 drawer 层 | [基本用法](#基本用法) |
 | afterOpened | `Function` | -- | 可选，打开 drawer 后时候调用 | [基本用法](#基本用法) |