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 00d64fee17f480050ef4229820b6373fe31ecdac..a52965f7c04c14fa6b14eb05a5a5d4abe1ff779c 100644
--- a/packages/devui-vue/devui/drawer/src/components/drawer-body.tsx
+++ b/packages/devui-vue/devui/drawer/src/components/drawer-body.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, inject, computed, toRefs, onUnmounted } from 'vue'
+import { defineComponent, inject, computed } from 'vue'
 
 import './drawer-body.scss'
 
@@ -12,16 +12,21 @@ export default defineComponent({
     const position: any = inject('position')
     const width: any = inject('width')
     const visible: boolean = inject('visible')
+    const backdropCloseable: any = inject('backdropCloseable')
 
     const navRight = computed(() => position.value === 'right' ? { 'right': 0 } : { 'left': 0 })
     const navWidth = computed(() => isFullScreen.value ? '100vw' : width.value)
 
-    let clickContent = (e) => {
+    const clickContent = (e) => {
       e.stopPropagation()
     }
 
+    const handleDrawerClose = () => {
+      if (!backdropCloseable.value) return;
+      closeDrawer();
+    }
+
     return {
-      closeDrawer,
       zindex,
       slots,
       isCover,
@@ -29,16 +34,19 @@ export default defineComponent({
       navWidth,
       visible,
       clickContent,
+      handleDrawerClose,
     }
   },
 
   render() {
-    const { zindex, closeDrawer, slots, isCover, navRight, navWidth, visible } = this
+    const {
+      zindex, slots, isCover, navRight, navWidth, visible, handleDrawerClose
+    } = this
 
     if (!visible) return null
 
     return (
-      <div class="devui-drawer" style={{ zIndex: zindex }} onClick={closeDrawer} >
+      <div class="devui-drawer" style={{ zIndex: zindex }} 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-header.tsx b/packages/devui-vue/devui/drawer/src/components/drawer-header.tsx
index 8db4bec7e95cf1c1dc50db7b833526fa26dbe1e1..7e3e3a05c083a71e31d834880b27b332529b8c06 100644
--- a/packages/devui-vue/devui/drawer/src/components/drawer-header.tsx
+++ b/packages/devui-vue/devui/drawer/src/components/drawer-header.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, ref, inject, computed, onUnmounted } from 'vue'
+import { defineComponent, ref, inject, computed } from 'vue'
 
 import './drawer-header.scss'
 
diff --git a/packages/devui-vue/devui/drawer/src/drawer-types.ts b/packages/devui-vue/devui/drawer/src/drawer-types.ts
index 9cdc51e6ef1c27fb98b5b2bfb5880f838e20ff44..207cf89ef5e9372b08ba1f6c51a3657c4c55b741 100644
--- a/packages/devui-vue/devui/drawer/src/drawer-types.ts
+++ b/packages/devui-vue/devui/drawer/src/drawer-types.ts
@@ -25,6 +25,13 @@ export const drawerProps = {
     type: String as PropType<'left' | 'right'>,
     default: 'left',
   },
+  backdropCloseable: {
+    type: Boolean,
+    default: true,
+  },
+  beforeHidden: {
+    type: [Promise, Function] as PropType<Promise<boolean> | (() => boolean | Promise<boolean>)>,
+  },
 } as const
 
 export type DrawerProps = ExtractPropTypes<typeof drawerProps>
diff --git a/packages/devui-vue/devui/drawer/src/drawer.tsx b/packages/devui-vue/devui/drawer/src/drawer.tsx
index 3b2be3ff4b2d239fc84d274d84e8293d861f2fdf..c19346a901576a9f997bd4ac8680b11fa775875c 100644
--- a/packages/devui-vue/devui/drawer/src/drawer.tsx
+++ b/packages/devui-vue/devui/drawer/src/drawer.tsx
@@ -10,14 +10,26 @@ export default defineComponent({
   props: drawerProps,
   emits: ['close', 'update:visible', 'afterOpened'],
   setup(props: DrawerProps, { emit, slots }) {
-    const { width, visible, zIndex, isCover, escKeyCloseable, position } = toRefs(props) // 宽度
-    let isFullScreen = ref(false)
+    const {
+      width, visible, zIndex, isCover, escKeyCloseable, position,
+      backdropCloseable,
+    } = toRefs(props)
+    const isFullScreen = ref(false)
 
     const fullScreenEvent = () => {
       isFullScreen.value = !isFullScreen.value
     }
 
-    const closeDrawer = () => {
+    const closeDrawer = async () => {
+      const beforeHidden = props.beforeHidden;
+      let result = (typeof beforeHidden === 'function' ? beforeHidden(): beforeHidden) ?? true;
+      if (result instanceof Promise) {
+        console.log(result);
+        
+        result = await result;
+      }
+      if (result) return;
+
       emit('update:visible', false)
       emit('close')
     }
@@ -47,6 +59,7 @@ export default defineComponent({
     provide('width', width)
     provide('visible', visible)
     provide('isFullScreen', isFullScreen)
+    provide('backdropCloseable', backdropCloseable)
 
     onUnmounted(() => {
       document.removeEventListener('keyup', escCloseDrawer)
diff --git a/packages/devui-vue/docs/components/drawer/index.md b/packages/devui-vue/docs/components/drawer/index.md
index 55e0bd5aebe3ae82a1ce528afceeff0db013c35f..e94b9f9a5a09d44ddd3b2b69d698d27825207e81 100644
--- a/packages/devui-vue/docs/components/drawer/index.md
+++ b/packages/devui-vue/docs/components/drawer/index.md
@@ -22,6 +22,8 @@
     v-model:visible="isDrawerShow" 
     :width="drawerWidth"
     :isCover="isCover" 
+    :backdropCloseable="backdropCloseable"
+    :beforeHidden="beforeHidden"
     position="right"
     @close="drawerClose"
     @afterOpened="drawerAfterOpened"
@@ -35,7 +37,8 @@ export default ({
     let isDrawerShow = ref(false)
     let btnName = ref('close')
     let drawerWidth = ref('15vw')
-    let isCover = ref(true)
+    let isCover = ref(false)
+    let backdropCloseable = ref(true);
 
     const drawerShow = () => {
       isDrawerShow.value = true
@@ -50,6 +53,12 @@ export default ({
       console.log('open')
     }
 
+    const beforeHidden = () => {
+      return new Promise((resolve) => {
+        resolve(false);
+      });
+    }
+
     return {
       isDrawerShow,
       btnName,
@@ -58,6 +67,8 @@ export default ({
       drawerClose,
       drawerAfterOpened,
       isCover,
+      backdropCloseable,
+      beforeHidden,
     }
   }
 })
@@ -74,7 +85,9 @@ export default ({
 | width | `String` | `300px` | 可选，设置抽屉板宽度 | [基本用法](#基本用法) |
 | zIndex | `Number` | `1000` | 可选，设置 drawer 的 z-index 值 | [基本用法](#基本用法) |
 | isCover | `Boolean` | `true` | 可选，是否有遮罩层 | [基本用法](#基本用法) |
-| onClose | `Function` | -- | 可选，关闭 drawer 时候调用 | [基本用法](#基本用法) |
 | escKeyCloseable | `Boolean` | `true` | 可选，设置可否通过 esc 按键来关闭 drawer 层 | [基本用法](#基本用法) |
-| afterOpened | `Function` | -- | 可选，打开 drawer 后时候调用 | [基本用法](#基本用法) |
 | position | `String` | 'right' | 可选，抽屉板出现的位置，'left'或者'right' | [基本用法](#基本用法) |
+| backdropCloseable | `Boolean` | true | 可选，设置可否通过点击背景来关闭 drawer 层 | [基本用法](#基本用法) |
+| beforeHidden | `Function \| Promise` | -- | 可选，关闭窗口之前的回调 | [基本用法](#基本用法) |
+| onClose | `Function` | -- | 可选，关闭 drawer 时候调用 | [基本用法](#基本用法) |
+| onAfterOpened | `Function` | -- | 可选，打开 drawer 后时候调用 | [基本用法](#基本用法) |