Ant-design-vue: menu菜单收缩bug

[carmel]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Version

2.0.0-rc.4

Environment

macos 10.15.6； chrome Version 87.0.4280.88；vue 3.0.2

Reproduction link

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

1. layout-sider collapsed状态时，最开始使用鼠标hover菜单，后继续将layout-sider置成not collapsed状态时，则二级菜单不会出现在一级菜单下面。
2. layout-sider collapsed状态时，将layout-sider置成not collapsed状态时，二级菜单会出现在一级菜单下面，但此时鼠标hover菜单无效果。

Steps to reproduce

<a-menu
theme="dark"
mode="inline"
:inline-collapsed="collapsed"
>
<template
v-for="item in menu"
:key="item.Id"
>
<a-menu-item
v-if="item.Children.length===0"
:key="item.Id"
>
<router-link :to="item.Path">
{{ item.Name }}
</router-link>
</a-menu-item>
<sub-menu
v-else
:key="item.Id"
:menu="item"
/>
</template>
</a-menu>

自定义的sub-menu：

<a-sub-menu
:key="menu.Id"
v-bind="$attrs"
>
<template #title>
<a-icon
:name="menu.Icon"
/>
<span>{{ menu.Name }}</span>
</template>
<template
v-for="item in menu.Children"
:key="item.Id"
>
<a-menu-item
v-if="item.Children.length===0"
:key="item.Id"
>
<router-link :to="item.Path">
{{ item.Name }}
</router-link>
</a-menu-item>
<sub-menu
v-else
:key="item.Id"
:menu="item"
/>
</template>
</a-sub-menu>

What is expected?

如官方例子：https://2x.antdv.com/components/menu-cn/

What is actually happening?

菜单收缩不正常

ps：想问下各位大神，这框架能用在生产环境吗？

[carmel]

@ZhangShiy 没有用babel-plugin-jsx。

{
  "name": "vite",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "@ant-design/colors": "^5.0.0",
    "@ant-design/icons-vue": "^5.1.7",
    "ant-design-vue": "^2.0.0-rc.2",
    "axios": "^0.21.0",
    "file-saver": "^2.0.5",
    "qs": "^6.9.4",
    "vue": "^3.0.2",
    "vue-router": "4",
    "vuex": "^4.0.0-rc.2",
    "xlsx": "^0.16.9"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.14.0",
    "eslint-plugin-vue": "^7.1.0",
    "sass": "^1.29.0",
    "sass-loader": "^10.1.0",
    "vite": "^1.0.0-rc.8"
  }
}

[carmel]

将menu改成下面的形式：

<a-menu
        theme="dark"
        mode="inline"
        :inline-collapsed="collapsed"
      >
        <custom-menu-item
          :menu-list="menu"
        />
      </a-menu>

custom-menu-item如下：

<template>
  <template
    v-for="menu in menuList"
    :key="menu.Id"
  >
    <a-menu-item
      v-if="menu.Children.length===0"
      :key="menu.Id"
    >
      <router-link :to="menu.Path">
        {{ menu.Name }}
      </router-link>
    </a-menu-item>
    <a-sub-menu
      v-else
      :key="menu.Id"
      v-bind="$attrs"
    >
      <template #title>
        <a-icon
          :name="menu.Icon"
        />
        <span>{{ menu.Name }}</span>
      </template>
      <custom-menu-item
        :key="menu.Id"
        :menu-list="menu.Children"
      />
    </a-sub-menu>
  </template>
</template>

结果上面所述的问题没了，但出现了新的问题：点一下子菜单全部选中了

[xushanpei]

更新到 rc.4 版本菜单样式不生效

[github-actions[bot]]

Hello @carmel. Please provide a online reproduction by forking this link for vue2、 link for vue3 or a minimal GitHub repository.Make sure to choose the correct version.

你好 @carmel, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 for vue2、 此处 for vue3 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。请确保选择准确的版本。

[tangjinzhou]

https://codesandbox.io/s/sharp-wilson-6esli
查看这个示例，并没能复现你说的问题
如果你不能定位问题，要提供复现示例，方便我们排查问题

[xushanpei]

出现了同样的问题,不知道怎么解决,要么菜单样式错乱,要么点击展开后不能收缩,菜单收起状态的时候二级菜单直接打不开

[tangjinzhou]

1. 单文件递归组件有点坑，对结构要求严格， menu 的子组件不能是自定义组件，你可以参考这个 https://codesandbox.io/s/hungry-stallman-gi1u3?file=/src/App.vue 来改动你的结构
2. vue 3.0.2 版本没问题，对于更高版本下个版本会先兼容一下，根本问题要等 vue 来修复

3、即将重构 menu，来解决 1 的问题

[carmel]

The repository is immature and not recommended!