diff --git a/src/dropdown-menu/context.ts b/src/dropdown-menu/context.ts
index 4c4d3d118..70e017104 100644
--- a/src/dropdown-menu/context.ts
+++ b/src/dropdown-menu/context.ts
@@ -1,4 +1,4 @@
-export type TriggerSource = 'overlay' | 'menu' | 'content' | 'confirm';
+export type TriggerSource = 'overlay' | 'menu' | 'content' | 'confirm' | 'outside';
 
 export type DropdownMenuDo = () => void;
 
diff --git a/src/dropdown-menu/dropdown-item.tsx b/src/dropdown-menu/dropdown-item.tsx
index 1f51e205e..45c61803c 100644
--- a/src/dropdown-menu/dropdown-item.tsx
+++ b/src/dropdown-menu/dropdown-item.tsx
@@ -283,6 +283,7 @@ export default defineComponent({
       const content = renderContent('default', 'content');
 
       const footer = renderTNodeJSX('footer');
+
       return (
         wrapperVisible.value && (
           <div id={popupId} class={classes.value} style={{ ...expandStyle.value }}>
diff --git a/src/dropdown-menu/dropdown-menu.tsx b/src/dropdown-menu/dropdown-menu.tsx
index df42c659e..276aa4a21 100644
--- a/src/dropdown-menu/dropdown-menu.tsx
+++ b/src/dropdown-menu/dropdown-menu.tsx
@@ -1,5 +1,5 @@
 import { defineComponent, computed, ref, reactive, watch, provide } from 'vue';
-
+import { onClickOutside } from '@vueuse/core';
 import { CaretDownSmallIcon, CaretUpSmallIcon } from 'tdesign-icons-vue-next';
 import camelCase from 'lodash/camelCase';
 
@@ -133,6 +133,13 @@ export default defineComponent({
       const container = findRelativeContainer(bar) || document.body;
       menuContext.recordMenuExpanded(container, control, DropdownMenuExpandState.collapsed);
     };
+
+    // dropdown-menu外面点击触发dropdown下拉框收起
+    onClickOutside(refBar, () => {
+      collapseMenu();
+      props.onMenuClosed?.({ trigger: 'outside' });
+    });
+
     const control: DropdownMenuControl = {
       expandMenu,
       collapseMenu,