vueComponent/ant-design-vue

nuxt3使用menu组件时设置mode="vertical"的方式，结果子菜单弹窗没有显示出来

robertyclin opened this issue · 1 comments

robertyclin commented
  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.2.0

Environment

nuxt3.10.2, vue3.4.19,chrome119

Reproduction link

https://antdv.com/components/menu-cn

Steps to reproduce

1、下载ant-design-vue-nuxt代码，本地运行
2、复制antdv的menu例子，运行结果有warning，并且子菜单弹窗并没有显示出来。
3、控制台有一个warning
runtime-core.esm-bundler.js:41 [Vue warn]: Hydration node mismatch:

  • Client vnode: Symbol(v-fgt)
  • Server rendered DOM:
    at <Trigger popupClassName="ant-menu-inline-collapsed-tooltip css-dev-only-do-not-override-3m4nqy" prefixCls="ant-tooltip" action="hover" ... >
    at <Tooltip title=null overlayClassName="ant-menu-inline-collapsed-tooltip css-dev-only-do-not-override-3m4nqy" trigger="hover" ... >
    at <ATooltip title=null open=false placement="right" ... >
    at <AMenuItem key="3" title="Option 3" originItemValue= {key: '3', label: 'Option 3', title: 'Option 3'} >
    at <SubMenuList id="sub_menu_1_$$_sub1-popup" ref=Ref< undefined > >
    at
    at <Align target=fn key="popup" ref=Ref< undefined > ... >
    at <BaseTransition onBeforeEnter=fn appear=false persisted=false ... >
    at <Transition ref=Ref< undefined > onBeforeEnter=fn >
    at <PopupInner prefixCls="ant-menu-submenu" point=null align= {points: Array(2), overflow: {…}, offset: Array(2)} ... >
    at <Popup prefixCls="ant-menu-submenu" destroyPopupOnHide=false visible=true ... >
    at <Portal getContainer=fn ref=Ref< undefined > didUpdate=fn >
    at <PortalWrapper key="portal" getContainer=undefined didUpdate=fn ... >
    at <Trigger prefixCls="ant-menu-submenu" popupClassName="ant-menu-submenu-popup ant-menu ant-menu-light css-dev-only-do-not-override-3m4nqy" stretch=null ... >
    at <PopupTrigger mode="vertical" prefixCls="ant-menu-submenu" visible=true ... >
    at <ResizeObserver disabled=true onResize=fn class="ant-menu-submenu ant-menu-submenu-vertical ant-menu-submenu-open ant-menu-submenu-active" ... >
    at <Item class="ant-menu-submenu ant-menu-submenu-vertical ant-menu-submenu-open ant-menu-submenu-active" prefixCls="ant-menu-overflow-item" responsive=false ... >
    at
    at <RawItem component="li" role="none" class="ant-menu-submenu ant-menu-submenu-vertical ant-menu-submenu-open ant-menu-submenu-active" ... >
    at
    at <ASubMenu key="sub1" icon=fn title="Navigation Three" ... >
    at <OverflowContextProvider key=2 value= {prefixCls: 'ant-menu-overflow-item', responsive: false, component: {…}, invalidate: true, order: 2, …} >
    at <ResizeObserver disabled=true onResize=fn >
    at <Overflow style= {width: '256px'} onMousedown=undefined prefixCls="ant-menu-overflow" ... >
    at <AMenu openKeys= ['sub1'] onUpdate:openKeys=fn selectedKeys= [] ... >
    at <Anonymous value= {hashed: true, components: {…}, theme: Theme, token: {…}} >
    at
    at <LocaleReceiver children=fn >
    at <AConfigProvider theme= {algorithm: ƒ} >
    at <AStyleProvider cache= Entity {cache: Map(5), instanceId: '465803411031b5b'} >
    at
    at
    at

What is expected?

没有报错能正常展示子菜单

What is actually happening?

不知道是什么错误

希望能帮忙解决这个问题