diff --git a/packages/devui-vue/devui/drawer/index.ts b/packages/devui-vue/devui/drawer/index.ts
index 0c923f4da8..c0ac81fb9b 100644
--- a/packages/devui-vue/devui/drawer/index.ts
+++ b/packages/devui-vue/devui/drawer/index.ts
@@ -8,10 +8,16 @@ Drawer.install = function(app: App): void {
 
 export { Drawer, DrawerService }
 
+// TODO: no-service model exists memory leak
+// rest tasks
+// 1. draggable width 
+// 2. function of the 1st icon in header-component 
+// 3. rest service-model api 
+// 4. typescript type of props
 export default {
   title: 'Drawer 抽屉板',
   category: '反馈',
-  status: '60%',
+  status: '75%',
   install(app: App): void {
     app.use(Drawer as any)
     app.config.globalProperties.$drawerService = DrawerService
diff --git a/packages/devui-vue/devui/drawer/src/components/drawer-body.tsx b/packages/devui-vue/devui/drawer/src/components/drawer-body.tsx
index a52965f7c0..d3525a420f 100644
--- a/packages/devui-vue/devui/drawer/src/components/drawer-body.tsx
+++ b/packages/devui-vue/devui/drawer/src/components/drawer-body.tsx
@@ -13,6 +13,7 @@ export default defineComponent({
     const width: any = inject('width')
     const visible: boolean = inject('visible')
     const backdropCloseable: any = inject('backdropCloseable')
+    const destroyOnHide: any = inject('destroyOnHide')
 
     const navRight = computed(() => position.value === 'right' ? { 'right': 0 } : { 'left': 0 })
     const navWidth = computed(() => isFullScreen.value ? '100vw' : width.value)
@@ -35,18 +36,23 @@ export default defineComponent({
       visible,
       clickContent,
       handleDrawerClose,
+      destroyOnHide,
     }
   },
 
   render() {
     const {
-      zindex, slots, isCover, navRight, navWidth, visible, handleDrawerClose
-    } = this
+      zindex, slots, isCover, navRight, navWidth, 
+      visible, handleDrawerClose, destroyOnHide } = this
 
-    if (!visible) return null
+    if (destroyOnHide.value && !visible) {
+      return null
+    }
+
+    const visibleVal = visible ? 'visible' : 'hidden'
 
     return (
-      <div class="devui-drawer" style={{ zIndex: zindex }} onClick={handleDrawerClose} >
+      <div class="devui-drawer" style={{ zIndex: zindex, visibility : visibleVal }} onClick={handleDrawerClose} >
         {isCover ? <div class="devui-overlay-backdrop" /> : null}
         <div class="devui-overlay-wrapper">
           <div class="devui-drawer-nav" style={{ 'width': navWidth, ...navRight }}>
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 c45f3b2545..b52256240e 100644
--- a/packages/devui-vue/devui/drawer/src/components/drawer-container.tsx
+++ b/packages/devui-vue/devui/drawer/src/components/drawer-container.tsx
@@ -4,11 +4,16 @@ export default defineComponent({
   name: 'DrawerContainer',
   setup() {
     const visible = inject('visible')
-    return { visible }
+    const destroyOnHide = inject('destroyOnHide')
+    return { visible, destroyOnHide }
   },
   render() {
-    const { visible } = this
-    if (!visible) return null
-    return <div>内容区域</div>
+    const { visible, destroyOnHide } = this
+
+    if (destroyOnHide.value && !visible) {
+      return null
+    }
+    const visibleVal = this.visible ? 'visible' : 'hidden'
+    return <div style={{ visibility : visibleVal }}>内容区域</div>
   }
 })
\ No newline at end of file
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 7e3e3a05c0..13ed5062e0 100644
--- a/packages/devui-vue/devui/drawer/src/components/drawer-header.tsx
+++ b/packages/devui-vue/devui/drawer/src/components/drawer-header.tsx
@@ -3,12 +3,13 @@ import { defineComponent, ref, inject, computed } from 'vue'
 import './drawer-header.scss'
 
 export default defineComponent({
-  name: 'DrawerHeader', // 头部
+  name: 'DrawerHeader',
   emits: ['toggleFullScreen', 'close'],
   setup(props, ctx) {
     const isFullScreen = ref(false)
 
-    const visible: boolean = inject('visible')
+    const visible = inject('visible')
+    const destroyOnHide = inject('destroyOnHide')
 
     const fullScreenClassName = computed(() =>  isFullScreen.value ? 'icon icon-minimize' : 'icon icon-maxmize')
 
@@ -22,15 +23,22 @@ export default defineComponent({
       ctx.emit('close')
     }
 
-    return { fullScreenClassName, visible, handleFullScreen, handleDrawerClose, }
+    return { fullScreenClassName, visible, handleFullScreen, handleDrawerClose, destroyOnHide }
   },
   render() {
-    const { handleFullScreen, handleDrawerClose, visible, fullScreenClassName } = this
-    
-    if (!visible) return null
+    const { 
+      handleFullScreen, handleDrawerClose, visible, 
+      fullScreenClassName, destroyOnHide 
+    } = this
+
+    if (destroyOnHide.value && !visible) {
+      return null
+    }
+
+    const visibleVal = visible ? 'visible' : 'hidden'
 
     return (
-      <div class="devui-drawer-header">
+      <div class="devui-drawer-header" style= {{ visibility : visibleVal }}>
         <div class="devui-drawer-header-item">
           <span class="devui-drawer-header-item icon icon-more-operate" />
         </div>
diff --git a/packages/devui-vue/devui/drawer/src/drawer-service.tsx b/packages/devui-vue/devui/drawer/src/drawer-service.tsx
index 645f62d74c..237a0fc8a6 100644
--- a/packages/devui-vue/devui/drawer/src/drawer-service.tsx
+++ b/packages/devui-vue/devui/drawer/src/drawer-service.tsx
@@ -14,7 +14,7 @@ function createDrawerApp(props: DrawerProps, drawer: drawerInstance, el: HTMLEle
     return drawer
   }
   const res = createApp(
-    <DDrawer {...props}>{{ header: props.header, content: props.content }}</DDrawer>
+    <DDrawer v-model:visible={props.visible}>{{ header: props.header, content: props.content }}</DDrawer>
   )
   res.mount(el)
   return res
@@ -39,8 +39,11 @@ class Drawer {
   }
 
   public show(): void {
-    this.div = document.createElement('div')
-    this.drawer = createDrawerApp(this.props, this.drawer, this.div)
+    if (!this.drawer) {
+      this.div = document.createElement('div')
+      this.drawer = createDrawerApp(this.props, this.drawer, this.div)
+    }
+    // TODO: this is a hack, need to find a better way. (the row 62)
     this.drawer._instance.props.visible = true
   }
 
@@ -55,12 +58,15 @@ class Drawer {
 
   public hideDirectly = (): void => {
     this.drawer._instance.props.visible = false
-    this.div.remove()
+    // this.div.remove()
   }
 
   public destroy = (): void => {
-    this.drawer.unmount()
-    this.drawer = null
-    this.div.remove()
+    // when drawer is null, it has been destroyed already and no need to destroy again
+    if (this.drawer) {
+      this.drawer.unmount()
+      this.drawer = null
+      this.div.remove()
+    }
   }
 }
diff --git a/packages/devui-vue/devui/drawer/src/drawer-types.ts b/packages/devui-vue/devui/drawer/src/drawer-types.ts
index 3be23c4aea..149cc22cba 100644
--- a/packages/devui-vue/devui/drawer/src/drawer-types.ts
+++ b/packages/devui-vue/devui/drawer/src/drawer-types.ts
@@ -29,6 +29,10 @@ export const drawerProps = {
     type: Boolean,
     default: true,
   },
+  destroyOnHide: { // 是否在隐藏时销毁
+    type: Boolean,
+    default: false,
+  },
   beforeHidden: { // 关闭前的回调
     type: [Promise, Function] as PropType<Promise<boolean> | (() => boolean | Promise<boolean>)>,
   },
diff --git a/packages/devui-vue/devui/drawer/src/drawer.tsx b/packages/devui-vue/devui/drawer/src/drawer.tsx
index 7e2d076dcd..9701947cfc 100644
--- a/packages/devui-vue/devui/drawer/src/drawer.tsx
+++ b/packages/devui-vue/devui/drawer/src/drawer.tsx
@@ -12,10 +12,10 @@ export default defineComponent({
   setup(props: DrawerProps, { emit, slots }) {
     const {
       width, visible, zIndex, isCover, escKeyCloseable, position,
-      backdropCloseable,
+      backdropCloseable, destroyOnHide
     } = toRefs(props)
     const isFullScreen = ref(false)
-
+    
     const fullscreen = () => {
       isFullScreen.value = !isFullScreen.value
     }
@@ -28,7 +28,7 @@ export default defineComponent({
       }
       if (result) return;
 
-      // BUG: 以服务方式 此处不生效
+      // BUG: this is not working when use service model
       emit('update:visible', false)
       emit('close')
     }
@@ -42,7 +42,10 @@ export default defineComponent({
     watch(visible, (val) => {
       if (val) {
         emit('afterOpened')
-        isFullScreen.value = false
+        // TODO: destroy-model should reset props, this function should be extracted
+        if (destroyOnHide.value) {
+          isFullScreen.value = false
+        }
       }
       if (escKeyCloseable && val) {
         document.addEventListener('keyup', escCloseDrawer)
@@ -51,6 +54,9 @@ export default defineComponent({
       }
     })
 
+    // TODO： need to handle these params again
+    // 1. should be provided by params' value (eg: provide('closeDrawer', closeDrawer.value))
+    // 2. which param should be provided 
     provide('closeDrawer', closeDrawer)
     provide('zindex', zIndex)
     provide('isCover', isCover)
@@ -59,6 +65,7 @@ export default defineComponent({
     provide('visible', visible)
     provide('isFullScreen', isFullScreen)
     provide('backdropCloseable', backdropCloseable)
+    provide('destroyOnHide', destroyOnHide)
 
     onUnmounted(() => {
       document.removeEventListener('keyup', escCloseDrawer)
@@ -73,14 +80,15 @@ export default defineComponent({
     }
   },
   render() {
-    const fullscreen: any = this.fullscreen
-    const closeDrawer: any = this.closeDrawer
-
-    if (!this.visible) return null
+    const { fullscreen, closeDrawer, visible, destroyOnHide } = this;
+    if (destroyOnHide.value && !visible) {
+      return null
+    }
 
+    const visibleVal = visible ? 'visible' : 'hidden'
     return (
       <Teleport to="body">
-        <DrawerBody>
+        <DrawerBody style= {{ visibility : visibleVal }}>
           {/* BUG: 已使用作用域插槽解决 此处对应的 DEMO 使用了 **双向绑定** 导致可以关闭【一种关闭了的'假象'】。*/}
           {this.slots.header ? this.slots.header({fullscreen, closeDrawer}) : 
             <DrawerHeader onToggleFullScreen={fullscreen} onClose={closeDrawer} />
diff --git a/packages/devui-vue/docs/components/drawer/index.md b/packages/devui-vue/docs/components/drawer/index.md
index 1b6bf592d2..daee278cdb 100644
--- a/packages/devui-vue/docs/components/drawer/index.md
+++ b/packages/devui-vue/docs/components/drawer/index.md
@@ -16,12 +16,11 @@
 
 ```vue
 <template>
-  <d-button  @click="drawerShow"> drawer {{ btnName }} </d-button>
+  <d-button @click="drawerShow">drawer {{ btnName }}</d-button>
   <d-drawer
-    v-if="isDrawerShow"
-    v-model:visible="isDrawerShow" 
+    v-model:visible="isDrawerShow"
     :width="drawerWidth"
-    :isCover="isCover" 
+    :isCover="isCover"
     :backdropCloseable="backdropCloseable"
     :beforeHidden="beforeHidden"
     position="right"
@@ -32,13 +31,13 @@
 <script>
 import { ref } from 'vue'
 
-export default ({
+export default {
   setup() {
     let isDrawerShow = ref(false)
     let btnName = ref('close')
     let drawerWidth = ref('15vw')
     let isCover = ref(false)
-    let backdropCloseable = ref(true);
+    let backdropCloseable = ref(true)
 
     const drawerShow = () => {
       isDrawerShow.value = true
@@ -55,8 +54,8 @@ export default ({
 
     const beforeHidden = () => {
       return new Promise((resolve) => {
-        resolve(false);
-      });
+        resolve(false)
+      })
     }
 
     return {
@@ -68,10 +67,10 @@ export default ({
       drawerAfterOpened,
       isCover,
       backdropCloseable,
-      beforeHidden,
+      beforeHidden
     }
   }
-})
+}
 </script>
 ```
 
@@ -85,17 +84,14 @@ export default ({
 
 ```vue
 <template>
-  <d-button  @click="drawerShow"> drawer </d-button>
-  <d-drawer
-    v-model:visible="isDrawerShow" 
-    :isCover="false" 
-  >
-    <template v-slot>
-      内容区插槽
-    </template>
-    <template v-slot:header>
-      <div @click="drawerClose">
-        <span class="icon icon-close" />
+  <d-button @click="drawerShow">drawer</d-button>
+  <d-drawer v-model:visible="isDrawerShow" :isCover="false">
+    <template v-slot:content>内容区插槽</template>
+    <template v-slot:header="{ fullscreen, closeDrawer }">
+      <div style="display: flex;">
+        <div @click="closeDrawer">关闭</div>
+        &nbsp;&nbsp;
+        <div @click="fullscreen">全屏切换</div>
       </div>
     </template>
   </d-drawer>
@@ -103,7 +99,7 @@ export default ({
 <script>
 import { ref } from 'vue'
 
-export default ({
+export default {
   setup() {
     let isDrawerShow = ref(false)
 
@@ -111,17 +107,12 @@ export default ({
       isDrawerShow.value = !isDrawerShow.value
     }
 
-    const drawerClose = () => {
-      isDrawerShow.value = false;
-    }
-
     return {
       isDrawerShow,
-      drawerShow,
-      drawerClose,
+      drawerShow
     }
   }
-})
+}
 </script>
 ```
 
@@ -133,21 +124,67 @@ export default ({
 
 ```vue
 <template>
-<d-button @click="open()">click me</d-button>
+  <d-button @click="open()">click me</d-button>
 </template>
 <script>
 import { defineComponent, ref, h } from 'vue'
 export default defineComponent({
   setup(props, ctx) {
-    const results =  ref(null);
+    const drawerOne = ref(null)
+    const drawerTwo = ref(null)
     function open() {
-      this.$drawerService.show({
-        visible: true,
-        isCover: false,
-      });
+      drawerTwo.value = this.$drawerService.create(
+        {
+          width: '50%',
+          data: {
+            'update:visible': true
+          },
+          content: () => {
+            return h(
+              'div',
+              {
+                onClick: () => {
+                  drawerTwo.value.destroy()
+                }
+              },
+              'destroy Two'
+            )
+          }
+        },
+        drawerTwo.value
+      )
+      drawerTwo.value.show()
+      drawerOne.value = this.$drawerService.create(
+        {
+          content: () => {
+            return [
+              h(
+                'div',
+                {
+                  onClick: () => {
+                    drawerOne.value.hide()
+                  }
+                },
+                'hide One'
+              ),
+              h(
+                'div',
+                {
+                  onClick: () => {
+                    drawerTwo.value.destroy()
+                  }
+                },
+                'destroy Two'
+              )
+            ]
+          }
+        },
+        drawerOne.value
+      )
+      drawerOne.value.show()
     }
     return {
-      open,
+      open
     }
   }
 })
@@ -156,24 +193,32 @@ export default defineComponent({
 
 :::
 
-### 参数及API
-
-| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
-| :---------: | :------: | :-------: | :----------------------- | --------------------------------- |
-| v-model:visible | `Boolean` | `false` | 必选，设置抽屉板是否可见 | [基本用法](#基本用法) |
-| width | `String` | `300px` | 可选，设置抽屉板宽度 | [基本用法](#基本用法) |
-| zIndex | `Number` | `1000` | 可选，设置 drawer 的 z-index 值 | [基本用法](#基本用法) |
-| isCover | `Boolean` | `true` | 可选，是否有遮罩层 | [基本用法](#基本用法) |
-| escKeyCloseable | `Boolean` | `true` | 可选，设置可否通过 esc 按键来关闭 drawer 层 | [基本用法](#基本用法) |
-| position | `String` | 'right' | 可选，抽屉板出现的位置，'left'或者'right' | [基本用法](#基本用法) |
-| backdropCloseable | `Boolean` | true | 可选，设置可否通过点击背景来关闭 drawer 层 | [基本用法](#基本用法) |
-| beforeHidden | `Function \| Promise` | -- | 可选，关闭窗口之前的回调 | [基本用法](#基本用法) |
-| onClose | `Function` | -- | 可选，关闭 drawer 时候调用 | [基本用法](#基本用法) |
-| onAfterOpened | `Function` | -- | 可选，打开 drawer 后时候调用 | [基本用法](#基本用法) |
+### 参数及 API
+
+|       参数        |         类型          |  默认   | 说明                                        | 跳转 Demo             |
+| :---------------: | :-------------------: | :-----: | :------------------------------------------ | --------------------- |
+|  v-model:visible  |       `Boolean`       | `false` | 必选，设置抽屉板是否可见                    | [基本用法](#基本用法) |
+|       width       |       `String`        | `300px` | 可选，设置抽屉板宽度                        | [基本用法](#基本用法) |
+|      zIndex       |       `Number`        | `1000`  | 可选，设置 drawer 的 z-index 值             | [基本用法](#基本用法) |
+|      isCover      |       `Boolean`       | `true`  | 可选，是否有遮罩层                          | [基本用法](#基本用法) |
+|  escKeyCloseable  |       `Boolean`       | `true`  | 可选，设置可否通过 esc 按键来关闭 drawer 层 | [基本用法](#基本用法) |
+|     position      |       `String`        | 'right' | 可选，抽屉板出现的位置，'left'或者'right'   | [基本用法](#基本用法) |
+| backdropCloseable |       `Boolean`       |  true   | 可选，设置可否通过点击背景来关闭 drawer 层  | [基本用法](#基本用法) |
+|   destroyOnHide   |       `Boolean`       |  true   | 可选，设置是否在隐藏时销毁 drawer 层        | [基本用法](#基本用法) |
+|   beforeHidden    | `Function \| Promise` |   --    | 可选，关闭窗口之前的回调                    | [基本用法](#基本用法) |
+|      onClose      |      `Function`       |   --    | 可选，关闭 drawer 时候调用                  | [基本用法](#基本用法) |
+|   onAfterOpened   |      `Function`       |   --    | 可选，打开 drawer 后时候调用                | [基本用法](#基本用法) |
 
 ### 插槽
 
-| 名称 | 类型 | 说明 | 跳转 Demo |
-| :--: | :---------: | :------: | :-------: |
-| default | 默认 | 抽屉板内容 | [自定义模板](#自定义模板) |
-| header  | 头部 | 抽屉板头部 | [自定义模板](#自定义模板) |
+|  名称   |    类型    |    说明    |         跳转 Demo         |
+| :-----: | :--------: | :--------: | :-----------------------: |
+| content |  具名插槽  | 抽屉板内容 | [自定义模板](#自定义模板) |
+| header  | 作用域插槽 | 抽屉板头部 | [自定义模板](#自定义模板) |
+
+#### 作用域插槽参数
+
+|    名称     |    作用    |                                  说明                                   |         跳转 Demo         |
+| :---------: | :--------: | :---------------------------------------------------------------------: | :-----------------------: |
+| fullscreen  |  切换全屏  |                                   --                                    | [自定义模板](#自定义模板) |
+| closeDrawer | 关闭抽屉板 | 在关闭抽屉板时必须调用该方法，否则 `beforeHidden` 和 `close` 属性不生效 | [自定义模板](#自定义模板) |