diff --git a/src/menu/const.ts b/src/menu/const.ts index c7d12610b0..ccab4dc299 100644 --- a/src/menu/const.ts +++ b/src/menu/const.ts @@ -17,6 +17,7 @@ export interface TdMenuInterface { theme?: Ref; isHead: boolean; vMenu?: VMenu; + collapsed?: Ref; select: (val: MenuValue) => void; open?: (val: MenuValue, type?: TdOpenType) => boolean | void; } diff --git a/src/menu/menu-item.tsx b/src/menu/menu-item.tsx index 89514bc04f..36299244f8 100644 --- a/src/menu/menu-item.tsx +++ b/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('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 = (
  • {renderTNodeJSX(this, 'icon')} {this.href ? ( @@ -79,5 +82,17 @@ export default defineComponent({ )}
    • ); + + const instance = getCurrentInstance(); + const node = instance.parent; + // 菜单收起，且只有本身为一级菜单才需要显示 tooltip + if (this.collapsed && /tmenu/i.test(node?.type.name)) { + return ( + renderContent(this, 'default', 'content')} placement="right"> + {liContent} + + ); + } + return liContent; }, }); diff --git a/src/menu/menu.tsx b/src/menu/menu.tsx index 3f478c5489..b756eab1d7 100644 --- a/src/menu/menu.tsx +++ b/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); }, diff --git a/src/tree-select/__tests__/__snapshots__/index.test.jsx.snap b/src/tree-select/__tests__/__snapshots__/index.test.jsx.snap index 3a5dd4e4b5..65707b43d0 100644 --- a/src/tree-select/__tests__/__snapshots__/index.test.jsx.snap +++ b/src/tree-select/__tests__/__snapshots__/index.test.jsx.snap @@ -83,9 +83,7 @@ exports[`TreeSelect > :props > :defaultValue 1`] = ` - - :props > :multiple 1`] = ` - - > 1`] = ` - - function > :collapsedItems 1`] = ` - - csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13326,9 +13324,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13344,9 +13340,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13362,9 +13356,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13380,9 +13372,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13398,9 +13388,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13416,9 +13404,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13440,9 +13426,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13458,9 +13442,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13476,9 +13458,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13494,9 +13474,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13512,9 +13490,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13530,9 +13506,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13548,9 +13522,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13572,9 +13544,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13590,9 +13560,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13608,9 +13576,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13626,9 +13592,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13644,9 +13608,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13662,9 +13624,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13680,9 +13640,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13704,9 +13662,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13722,9 +13678,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13740,9 +13694,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13758,9 +13710,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13776,9 +13726,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13794,9 +13742,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13812,9 +13758,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13877,9 +13821,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13895,9 +13837,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13913,9 +13853,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13931,9 +13869,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13949,9 +13885,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -13967,9 +13901,7 @@ exports[`csr snapshot test > csr test ./src/calendar/_example/cell-append.vue 1`
    - - - +
    @@ -87252,6 +87184,7 @@ exports[`csr snapshot test > csr test ./src/menu/_example/group-side.vue 1`] = ` 主导航 +
  • @@ -87272,6 +87205,8 @@ exports[`csr snapshot test > csr test ./src/menu/_example/group-side.vue 1`] = `
    • + +
    csr test ./src/menu/_example/group-side.vue 1`] = ` +
  • @@ -87346,6 +87282,9 @@ exports[`csr snapshot test > csr test ./src/menu/_example/group-side.vue 1`] = `
    • + + +
  • @@ -87366,6 +87305,9 @@ exports[`csr snapshot test > csr test ./src/menu/_example/group-side.vue 1`] = `
    • + + +
  • @@ -87386,6 +87328,8 @@ exports[`csr snapshot test > csr test ./src/menu/_example/group-side.vue 1`] = `
    • + +
    csr test ./src/menu/_example/group-side.vue 1`] = ` 更多
    +
  • @@ -87417,6 +87362,9 @@ exports[`csr snapshot test > csr test ./src/menu/_example/group-side.vue 1`] = `
    • + + +
  • @@ -87437,6 +87385,8 @@ exports[`csr snapshot test > csr test ./src/menu/_example/group-side.vue 1`] = `
    • + + @@ -187150,9 +187100,7 @@ exports[`csr snapshot test > csr test ./src/tree-select/_example/collapsed.vue 1 - - csr test ./src/tree-select/_example/collapsed.vue 1 - - csr test ./src/tree-select/_example/multiple.vue 1` - - csr test ./src/tree-select/_example/valuetype.vue 1 - - csr test ./src/upload/_example/base.vue 1`] = `
    - - - - +
    ssr test ./src/calendar/_example/card-cell.vue 1`] exports[`ssr snapshot test > ssr test ./src/calendar/_example/cell.vue 1`] = `"
    2020 年
    12 月
    隐藏周末
    一二三四五六日
    30
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    错误事件
    警告事件
    正常事件
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    1
    2
    3
    "`; -exports[`ssr snapshot test > ssr test ./src/calendar/_example/cell-append.vue 1`] = `"
    2020 年
    12 月
    隐藏周末
    一二三四五六日
    30
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    我们的纪念日家庭聚会
    29
    30
    31
    01
    02
    03
    "`; +exports[`ssr snapshot test > ssr test ./src/calendar/_example/cell-append.vue 1`] = `"
    2020 年
    12 月
    隐藏周末
    一二三四五六日
    30
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    我们的纪念日家庭聚会
    29
    30
    31
    01
    02
    03
    "`; exports[`ssr snapshot test > ssr test ./src/calendar/_example/controller-config.vue 1`] = `"
    控件全局

    控件局部

    2020 年
    12 月
    隐藏周末
    一二三四五六日
    30
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    01
    02
    03
    "`; @@ -645,7 +645,7 @@ exports[`ssr snapshot test > ssr test ./src/menu/_example/custom-side.vue 1`] = exports[`ssr snapshot test > ssr test ./src/menu/_example/double.vue 1`] = `"
    \\"logo\\"
    • 菜单1
      • 子菜单1-1
      • 子菜单1-2
      • 子菜单1-3
    • 菜单2
      • 子菜单2-1
      • 子菜单2-2
      • 子菜单2-3
    • 菜单3
      • 子菜单3-1
      • 子菜单3-2
      • 子菜单3-3
    • 菜单4
      • 子菜单4-1
      • 子菜单4-2
      • 子菜单4-3
    • 菜单5
      • 子菜单5-1
      • 子菜单5-2
      • 子菜单5-3
    • 菜单6
      • 子菜单6-1
      • 子菜单6-2
      • 子菜单6-3
    \\"logo\\"
    • 菜单1
      • 子菜单1-1
      • 子菜单1-2
      • 子菜单1-3
    • 菜单2
      • 子菜单2-1
      • 子菜单2-2
      • 子菜单2-3
    • 菜单3
      • 子菜单3-1
      • 子菜单3-2
      • 子菜单3-3
    • 菜单4
      • 子菜单4-1
      • 子菜单4-2
      • 子菜单4-3
    • 菜单5
      • 子菜单5-1
      • 子菜单5-2
      • 子菜单5-3
    • 菜单6
      • 子菜单6-1
      • 子菜单6-2
      • 子菜单6-3
    "`; -exports[`ssr snapshot test > ssr test ./src/menu/_example/group-side.vue 1`] = `"
    \\"logo\\"
      主导航
    • 仪表盘
      • 组件
    • 列表项
    • 表单项
    • 详情页
    • 结果页
      • 更多
    • 个人页
    • 登录页
    "`; +exports[`ssr snapshot test > ssr test ./src/menu/_example/group-side.vue 1`] = `"
    \\"logo\\"
      主导航
    • 仪表盘
      • 组件
    • 列表项
    • 表单项
    • 详情页
    • 结果页
      • 更多
    • 个人页
    • 登录页
    "`; exports[`ssr snapshot test > ssr test ./src/menu/_example/head-menu-dark.vue 1`] = `"
    \\"logo\\"
    • 已选内容
    • 菜单内容一
    • 菜单内容二
    • 菜单内容三
    "`; @@ -1304,13 +1304,13 @@ exports[`ssr snapshot test > ssr test ./src/tree/_example/vmodel.vue 1`] = `" ssr test ./src/tree-select/_example/base.vue 1`] = `"
    "`; -exports[`ssr snapshot test > ssr test ./src/tree-select/_example/collapsed.vue 1`] = `"
    "`; +exports[`ssr snapshot test > ssr test ./src/tree-select/_example/collapsed.vue 1`] = `"
    "`; exports[`ssr snapshot test > ssr test ./src/tree-select/_example/filterable.vue 1`] = `"
    "`; exports[`ssr snapshot test > ssr test ./src/tree-select/_example/lazy.vue 1`] = `"
    "`; -exports[`ssr snapshot test > ssr test ./src/tree-select/_example/multiple.vue 1`] = `"
    "`; +exports[`ssr snapshot test > ssr test ./src/tree-select/_example/multiple.vue 1`] = `"
    "`; exports[`ssr snapshot test > ssr test ./src/tree-select/_example/prefix.vue 1`] = `"
    "`; @@ -1318,22 +1318,9 @@ exports[`ssr snapshot test > ssr test ./src/tree-select/_example/props.vue 1`] = exports[`ssr snapshot test > ssr test ./src/tree-select/_example/valuedisplay.vue 1`] = `"
    ()
    "`; -exports[`ssr snapshot test > ssr test ./src/tree-select/_example/valuetype.vue 1`] = `"
    "`; - -exports[`ssr snapshot test > ssr test ./src/upload/_example/base.vue 1`] = ` -"

    要求文件大小在 1M 以内
    这是一个默认文件
    文件上传失败示例
    " -`; +exports[`ssr snapshot test > ssr test ./src/tree-select/_example/valuetype.vue 1`] = `"
    "`; + +exports[`ssr snapshot test > ssr test ./src/upload/_example/base.vue 1`] = `"

    要求文件大小在 1M 以内
    这是一个默认文件
    文件上传失败示例
    "`; exports[`ssr snapshot test > ssr test ./src/upload/_example/custom-drag.vue 1`] = `"


    "`;