diff --git a/packages/design/src/Drawer.vue b/packages/design/src/Drawer.vue
index 79a9d9ab..749a500f 100644
--- a/packages/design/src/Drawer.vue
+++ b/packages/design/src/Drawer.vue
@@ -1,6 +1,7 @@
 <template>
   <component
     class="tmagic-design-drawer"
+    ref="drawer"
     :is="uiComponent"
     v-bind="uiProps"
     @open="openHandler"
@@ -22,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 import { getConfig } from './config';
 import type { DrawerProps } from './types';
@@ -41,6 +42,8 @@ const uiComponent = ui?.component || 'el-drawer';
 
 const uiProps = computed(() => ui?.props(props) || props);
 
+const drawer = ref<any>();
+
 const openHandler = (...args: any[]) => {
   emit('open', ...args);
 };
@@ -56,4 +59,13 @@ const closedHandler = (...args: any[]) => {
 const updateModelValue = (v: any) => {
   emit('update:modelValue', v);
 };
+
+defineExpose({
+  handleClose: () => {
+    if (typeof drawer.value?.handleClose === 'function') {
+      return drawer.value.handleClose();
+    }
+    updateModelValue(false);
+  },
+});
 </script>
diff --git a/packages/design/src/types.ts b/packages/design/src/types.ts
index c5ff22a7..90bd9fe3 100644
--- a/packages/design/src/types.ts
+++ b/packages/design/src/types.ts
@@ -481,7 +481,15 @@ export interface Components {
   };
 
   drawer: {
-    component: DefineComponent<DrawerProps, {}, any> | string;
+    component:
+      | DefineComponent<
+          DrawerProps,
+          {
+            handleClose: () => void;
+          },
+          any
+        >
+      | string;
     props: (props: DrawerProps) => DrawerProps;
   };