feat: support show tooltip when menu collapsed

src/menu/const.ts

@@ -17,6 +17,7 @@ export interface TdMenuInterface {
   theme?: Ref<string>;
   isHead: boolean;
   vMenu?: VMenu;
+  collapsed?: Ref<boolean>;
   select: (val: MenuValue) => void;
   open?: (val: MenuValue, type?: TdOpenType) => boolean | void;
 }

src/menu/menu-item.tsx

@@ -1,10 +1,11 @@
-import { defineComponent, computed, inject, onMounted, ref, toRefs } from 'vue';
+import { defineComponent, computed, inject, onMounted, ref, toRefs, getCurrentInstance } from 'vue';
 import props from './menu-item-props';
 import { TdMenuInterface, TdSubMenuInterface } from './const';
 import { renderContent, renderTNodeJSX } from '../utils/render-tnode';
 import { emitEvent } from '../utils/event';
 import useRipple from '../hooks/useRipple';
 import { usePrefixClass } from '../hooks/useConfig';
+import Tooltip from '../tooltip';
 
 export default defineComponent({
   name: 'TMenuItem',
@@ -18,6 +19,7 @@ export default defineComponent({
     useRipple(itemRef);
     const submenu = inject<TdSubMenuInterface>('TdSubmenu', null);
     const active = computed(() => menu.activeValue.value === props.value);
+    const collapsed = computed(() => menu.collapsed?.value);
     const classes = computed(() => [
       `${classPrefix.value}-menu__item`,
       {
@@ -37,6 +39,7 @@ export default defineComponent({
       classPrefix,
       menu,
       active,
+      collapsed,
       classes,
       itemRef,
       href,
@@ -67,7 +70,7 @@ export default defineComponent({
     },
   },
   render() {
-    return (
+    const liContent = (
       <li ref="itemRef" class={this.classes} onClick={this.handleClick}>
         {renderTNodeJSX(this, 'icon')}
         {this.href ? (
@@ -79,5 +82,17 @@ export default defineComponent({
         )}
       </li>
     );
+
+    const instance = getCurrentInstance();
+    const node = instance.parent;
+    // 菜单收起，且只有本身为一级菜单才需要显示 tooltip
+    if (this.collapsed && /tmenu/i.test(node?.type.name)) {
+      return (
+        <Tooltip content={() => renderContent(this, 'default', 'content')} placement="right">
+          {liContent}
+        </Tooltip>
+      );
+    }
+    return liContent;
   },
 });

src/menu/menu.tsx

@@ -24,6 +24,7 @@ export default defineComponent({
     const mode = ref(props.expandType);
     const theme = computed(() => props.theme);
     const isMutex = computed(() => props.expandMutex);
+    const collapsed = computed(() => props.collapsed);
     const menuClass = computed(() => [
       `${classPrefix.value}-default-menu`,
       `${classPrefix.value}-menu--${props.theme}`,
@@ -68,6 +69,7 @@ export default defineComponent({
       theme,
       isHead: false,
       vMenu,
+      collapsed,
       select: (value: MenuValue) => {
         setActiveValue(value);
       },

src/tree-select/__tests__/__snapshots__/index.test.jsx.snap

@@ -83,9 +83,7 @@ exports[`TreeSelect > :props > :defaultValue 1`] = `
           <span
             class="t-tag--text"
           >
-
             <!---->
-
           </span>
           <svg
             class="t-icon t-icon-close t-tag__icon-close"
@@ -585,9 +583,7 @@ exports[`TreeSelect > :props > :multiple 1`] = `
           <span
             class="t-tag--text"
           >
-
             <!---->
-
           </span>
           <svg
             class="t-icon t-icon-close t-tag__icon-close"
@@ -1020,9 +1016,7 @@ exports[`TreeSelect > <slot> > <collapsedItems> 1`] = `
           <span
             class="t-tag--text"
           >
-
             <!---->
-
           </span>
           <svg
             class="t-icon t-icon-close t-tag__icon-close"
@@ -1354,9 +1348,7 @@ exports[`TreeSelect > function > :collapsedItems 1`] = `
           <span
             class="t-tag--text"
           >
-
             <!---->
-
           </span>
           <svg
             class="t-icon t-icon-close t-tag__icon-close"