fix(dropdown-menu): 修复点击下拉框以外区域下拉框需要收起问题 (#1369)

* fix(dropdown-menu): 修复点击下拉框以外区域下拉框需要收起问题 * fix(dropdown-menu): 修复点击下拉框以外区域下拉框需要收起问题
Tencent · May 10, 2024 · c094ab4 · c094ab4
1 parent f2a25bf
commit c094ab4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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,