feat(DropdownMenu): enrich events (#837)

Tencent · Jun 8, 2023 · f8cff74 · f8cff74
1 parent 4705790
commit f8cff74
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 10 deletions.
diff --git a/src/dropdown-menu/context.ts b/src/dropdown-menu/context.ts
@@ -1,3 +1,5 @@
+export type TriggerSource = 'overlay' | 'dropdown-item';
+
 export type DropdownMenuDo = () => void;
 
 export type DropdownMenuState = {
@@ -10,6 +12,7 @@ export type DropdownMenuState = {
 export type DropdownMenuControl = {
   expandMenu: (item: any, idx: number) => void;
   collapseMenu: () => void;
+  emitEvents: (emit: string, trigger?: TriggerSource) => void;
 };
 
 export enum DropdownMenuExpandState {

diff --git a/src/dropdown-menu/demos/single.vue b/src/dropdown-menu/demos/single.vue
@@ -1,5 +1,5 @@
 <template>
-  <t-dropdown-menu>
+  <t-dropdown-menu @menu-opened="handleMenuOpened" @menu-closed="handleMenuClosed">
     <t-dropdown-item :options="product.options" :value="product.value" @change="onChange" />
     <t-dropdown-item :options="sorter.options" :value="sorter.value" />
   </t-dropdown-menu>
@@ -39,4 +39,12 @@ const sorter = {
 function onChange(e: any) {
   console.log(e);
 }
+
+const handleMenuOpened = () => {
+  console.log('==handleMenuOpened===');
+};
+
+const handleMenuClosed = (val: string) => {
+  console.log('==handleMenuClosed===', val);
+};
 </script>
diff --git a/src/dropdown-menu/dropdown-item.vue b/src/dropdown-menu/dropdown-item.vue
@@ -8,6 +8,7 @@
       :overlay-props="{ style: 'position: absolute' }"
       :class="`${name}__popup-host`"
       :attach="`#${popupId}`"
+      @visible-change="onVisibleChange"
       @close="closePopup"
     >
       <div :class="styleContent">
@@ -101,7 +102,7 @@ export default defineComponent({
     // 从父组件取属性、状态和控制函数
     const menuProps = inject('dropdownMenuProps') as TdDropdownMenuProps;
     const menuState = inject('dropdownMenuState') as DropdownMenuState;
-    const { expandMenu, collapseMenu } = inject('dropdownMenuControl') as DropdownMenuControl;
+    const { expandMenu, collapseMenu, emitEvents } = inject('dropdownMenuControl') as DropdownMenuControl;
 
     // 组件样式
     const classes = computed(() => [`${name}`]);
@@ -254,12 +255,14 @@ export default defineComponent({
       }
       collapseMenu();
     });
-    // 点击遮罩层
-    const onClickOverlay = () => {
-      if (menuProps.closeOnClickOverlay) {
+
+    const onVisibleChange = (visible: boolean) => {
+      if (menuProps.closeOnClickOverlay && !visible) {
         collapseMenu();
+        emitEvents('menuClosed', 'overlay');
       }
     };
+
     return {
       name: ref(name),
       ...toRefs(props),
@@ -278,7 +281,7 @@ export default defineComponent({
       collapseMenu,
       resetSelect,
       confirmSelect,
-      onClickOverlay,
+      onVisibleChange,
     };
   },
 });

diff --git a/src/dropdown-menu/dropdown-menu.vue b/src/dropdown-menu/dropdown-menu.vue
@@ -14,8 +14,15 @@
 import { defineComponent, computed, toRefs, ref, reactive, watch, provide } from 'vue';
 import { CaretDownSmallIcon } from 'tdesign-icons-vue-next';
 import config from '../config';
-import { context as menuContext, DropdownMenuState, DropdownMenuControl, DropdownMenuExpandState } from './context';
+import {
+  context as menuContext,
+  DropdownMenuState,
+  DropdownMenuControl,
+  DropdownMenuExpandState,
+  TriggerSource,
+} from './context';
 import TransAniControl from './trans-ani-control';
+import { useEmitEvent } from '../shared';
 import { findRelativeRect, findRelativeContainer } from './dom-utils';
 import DropdownMenuProps from './props';
 
@@ -26,7 +33,9 @@ export default defineComponent({
   name,
   components: { CaretDownSmallIcon },
   props: DropdownMenuProps,
-  setup(props, { slots, expose }) {
+  emits: ['menuOpened', 'menuClosed'],
+  setup(props, { slots, expose, emit }) {
+    const emitEvent = useEmitEvent(props, emit);
     // 菜单状态
     const state = reactive<DropdownMenuState>({
       activeId: null,
@@ -90,6 +99,11 @@ export default defineComponent({
         [`${name}__icon--active`]: idx === state.activeId,
       },
     ]);
+
+    const emitEvents = (emit: string, trigger?: TriggerSource) => {
+      emitEvent(emit, { trigger });
+    };
+
     // 展开对应项目的菜单
     const expandMenu = (item: any, idx: number) => {
       const { disabled } = item;
@@ -99,9 +113,10 @@ export default defineComponent({
       if (state.activeId === idx) {
         // 再次点击时收起
         collapseMenu();
+        emitEvents('menuClosed', 'dropdown-item');
         return;
       }
-
+      emitEvents('menuOpened');
       state.activeId = idx;
 
       // 获取菜单定位
@@ -126,7 +141,7 @@ export default defineComponent({
       const container = findRelativeContainer(bar) || document.body;
       menuContext.recordMenuExpanded(container, control, DropdownMenuExpandState.collapsed);
     };
-    const control: DropdownMenuControl = { expandMenu, collapseMenu };
+    const control: DropdownMenuControl = { expandMenu, collapseMenu, emitEvents };
     // 提供子组件访问
     provide('dropdownMenuControl', control);
     expose({