diff --git a/devui/drawer/src/components/drawer-container.tsx b/devui/drawer/src/components/drawer-container.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ea3202458bbc6daae7765013db674e41a1478c29
--- /dev/null
+++ b/devui/drawer/src/components/drawer-container.tsx
@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'DrawerContainer',
+  render() {
+    return <div>内容区域</div>
+  }
+})
\ No newline at end of file
diff --git a/devui/drawer/src/drawer-types.ts b/devui/drawer/src/drawer-types.ts
index 196744401fb96b7fc02f4249a8c9c2bf533ae6be..8e166033f9e5103968008a6685b198c53f454de5 100644
--- a/devui/drawer/src/drawer-types.ts
+++ b/devui/drawer/src/drawer-types.ts
@@ -8,7 +8,19 @@ export const drawerProps = {
   visible: {
     type: Boolean,
     default: false,
-  }
+  },
+  zIndex: {
+    type: Number,
+    default: 1000,
+  },
+  isCover: {
+    type: Boolean,
+    default: true,
+  },
+  escKeyCloseable: {
+    type: Boolean,
+    default: true,
+  },
 } as const
 
 export type DrawerProps = ExtractPropTypes<typeof drawerProps>
diff --git a/devui/drawer/src/drawer.tsx b/devui/drawer/src/drawer.tsx
index d60c77690a8baeca146c3b83ad783bbbbab2f345..5791d89bc2367d9ae43f192b79047c29fd23278b 100644
--- a/devui/drawer/src/drawer.tsx
+++ b/devui/drawer/src/drawer.tsx
@@ -1,17 +1,17 @@
-import { defineComponent, ref, toRefs } from 'vue'
+import { defineComponent, ref, toRefs, watch } from 'vue'
 import { drawerProps, DrawerProps } from './drawer-types'
 
 import DrawerHeader from './components/drawer-header'
+import DrawerContainer from './components/drawer-container'
 
 import './drawer.scss'
 
 export default defineComponent({
   name: 'DDrawer',
   props: drawerProps,
-  emits: ['close', 'update:visible'],
-  setup(props: DrawerProps, ctx) {
-    const { width, visible } = toRefs(props); // 宽度
-    const ZIndex = ref<number>(1000); // z-index
+  emits: ['close', 'update:visible', 'afterOpened'],
+  setup(props: DrawerProps, { emit, slots }) {
+    const { width, visible, zIndex, isCover, escKeyCloseable } = toRefs(props); // 宽度
     const isFullScreen = ref(false);
 
     const fullScreenEvent = () => {
@@ -19,35 +19,56 @@ export default defineComponent({
     }
 
     const closeDrawer = () => {
-      ctx.emit('update:visible', false);
-      ctx.emit('close');
+      emit('update:visible', false);
+      emit('close');
     }
-    
+
+    const escCloseDrawer = (e) => {
+      if (e.code === 'Escape') {
+        emit('update:visible', false);
+      }
+    }
+
+    watch(visible, (val) => {
+      if (val) {
+        emit('afterOpened');
+      }
+      if (escKeyCloseable && val) {
+        document.addEventListener('keyup', escCloseDrawer);
+      } else {
+        document.removeEventListener('keyup', escCloseDrawer);
+      }
+    })    
+
     return {
-      ZIndex,
+      zIndex,
       isFullScreen,
       width,
       visible,
+      slots,
+      isCover,
       fullScreenEvent,
       closeDrawer, 
     };
   },
   render() {
-    const zindex: number = this.ZIndex;
+    const zindex: number = this.zIndex;
     const width: number = this.isFullScreen ? '100vw' : this.width;
     const fullScreenEvent: any = this.fullScreenEvent;
     const closeDrawer: any = this.closeDrawer;
+    const isCover: boolean = this.isCover;
 
     if (!this.visible) return;
 
     return (
       <div class="devui-drawer" style={{ zIndex: zindex }}>
-        {/* 越后面的元素层级越高？ */}
-        <div class="devui-overlay-backdrop" />
+        {/* TODO : 有遮罩层时才能点击关闭 onClick={ closeDrawer }*/}
+        {isCover ? <div class="devui-overlay-backdrop"/>: ''}
         <div class="devui-overlay-wrapper" >
           <div class="devui-drawer-nav" style={{ 'left': 0, 'width': width }}>
             <div class="devui-drawer-content">
-              <DrawerHeader onToggleFullScreen={fullScreenEvent} onClose={ closeDrawer }/>
+              <DrawerHeader onToggleFullScreen={fullScreenEvent} onClose={closeDrawer} />
+              <div> { this.slots.default ? this.slots.default() : <DrawerContainer/>} </div>
             </div>
           </div>
         </div>
diff --git a/docs/components/drawer/index.md b/docs/components/drawer/index.md
index 7278248f8bbe21757dfee1f4f9c6799a184f0c67..f2ff96f2bd268a6a9eedb07b72b3946ae58bb283 100644
--- a/docs/components/drawer/index.md
+++ b/docs/components/drawer/index.md
@@ -17,7 +17,12 @@
 ```vue
 <template>
   <d-button  @click="drawerShow"> drawer {{ btnName }} </d-button>
-  <d-drawer v-model:visible="isDrawerShow" :width="drawerWidth" @close="drawerClose">
+  <d-drawer 
+    v-model:visible="isDrawerShow" 
+    :width="drawerWidth" 
+    @close="drawerClose"
+    @afterOpened="drawerAfterOpened"
+  />
 </template>
 <script>
 import { ref } from 'vue'
@@ -35,14 +40,19 @@ export default ({
 
     const drawerClose = () => {
       btnName.value = 'close'
-      
     }
+
+    const drawerAfterOpened = () => {
+      console.log('open');
+    }
+
     return {
       isDrawerShow,
       btnName,
       drawerWidth,
       drawerShow,
       drawerClose,
+      drawerAfterOpened,
     }
   }
 })
@@ -55,6 +65,9 @@ export default ({
 
 | 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
 | :---------: | :------: | :-------: | :----------------------- | --------------------------------- |
-| visible | `Boolean` | `false` | 必选，设置抽屉板是否可见 | [基本用法](###基本用法) |
-| width | `String` | `300px` | 可选，设置抽屉板宽度 | [基本用法](###基本用法) |
-| onClose | `Function` | -- | 可选，关闭 drawer 时候调用 |[基本用法](###基本用法) |
\ No newline at end of file
+| visible | `Boolean` | `false` | 必选，设置抽屉板是否可见 | [基本用法](#基本用法) |
+| width | `String` | `300px` | 可选，设置抽屉板宽度 | [基本用法](#基本用法) |
+| zIndex | `Number` | `1000` | 1000 | [基本用法](#基本用法) |
+| onClose | `Function` | -- | 可选，关闭 drawer 时候调用 | [基本用法](#基本用法) |
+| escKeyCloseable | `Boolean` | `true` | 可选，设置可否通过 esc 按键来关闭 drawer 层 | [基本用法](#基本用法) |
+| afterOpened | `Function` | -- | 可选，打开 drawer 后时候调用 | [基本用法](#基本用法) |