🐛 [Bug]: 菜单选中效果

[fdf-hash]

trafficstars

Version

"devui-theme": "^0.0.4",

Vue Version

"vue": "^3.3.4",

Link to minimal reproduction

代码地址

Step to reproduce

代码如下

<template>
  <div class="layout-nav">
    <div class="layout-nav-content">
      <d-menu
        mode="vertical"
        router
        v-for="item in userApps"
      >
        <d-sub-menu
          :title="item.meta?.title"
          v-if="item.children && item.children.length"
          :key="item.path"
        >
          <template #icon>
            {{ item.path }}
            <i class="icon-system"></i>
          </template>
          <d-menu-item
            v-for="children in item.children"
            :key="`${item.path}/${children.path}`"
          >
            <span>{{ `${item.path}/${children.path}` }}</span>
            <br />
            <span>{{ children.meta?.title }}</span>
          </d-menu-item>
        </d-sub-menu>

        <!-- <d-sub-menu :title="item.meta?.title" v-else>
          <template #icon>
            <i class="icon-system"></i>
          </template>
          <d-menu-item
            v-for="children in item.children"
            :key="`${item.path}/${children.path}`"
          >
            <d-sub-menu :title="item.meta?.title">
              <template #icon>
                <i class="icon-system"></i>
              </template>
              <d-menu-item
                v-for="children in item.children"
                :key="`${item.path}/${children.path}`"
              >
                <span>{{ children.meta?.title }}</span>
              </d-menu-item>
            </d-sub-menu>
          </d-menu-item>
        </d-sub-menu> -->
      </d-menu>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router"

const user = useRouter()

const userApps = user.options.routes

console.log(userApps, "---")

// 此处打印数据
[
    {
        "path": "/",
        "component": {
            "__name": "main",
            "__hmrId": "a3f01250",
            "__scopeId": "data-v-a3f01250",
            "__file": "E:/projects/my-vue-app/src/layout/home/main.vue"
        },
        "meta": {
            "title": "首页"
        }
    },
    {
        "path": "/web",
        "meta": {
            "title": "web网页"
        },
        "component": {
            "__name": "layout",
            "__hmrId": "abf49ee6",
            "__file": "E:/projects/my-vue-app/src/layout/layout/layout.vue"
        },
        "children": [
            {
                "path": "index",
                "meta": {
                    "title": "web网页"
                }
            }
        ]
    },
    {
        "path": "/assets",
        "meta": {
            "title": "Assets网页"
        },
        "component": {
            "__name": "layout",
            "__hmrId": "abf49ee6",
            "__file": "E:/projects/my-vue-app/src/layout/layout/layout.vue"
        },
        "children": [
            {
                "path": "index",
                "meta": {
                    "title": "Assets网页"
                }
            }
        ]
    },
    {
        "path": "/plan",
        "meta": {
            "title": "plan"
        },
        "component": {
            "__name": "layout",
            "__hmrId": "abf49ee6",
            "__file": "E:/projects/my-vue-app/src/layout/layout/layout.vue"
        },
        "children": [
            {
                "path": "set",
                "meta": {
                    "title": "新增 SET"
                }
            },
            {
                "path": "update",
                "meta": {
                    "title": "更新 UPDATE"
                }
            }
        ]
    }
]
</script>

What is expected

希望就是在点击某一项子菜单的时候别的子菜单选中状态消失

What is actually happening

实际上我选择一个，别的也不消失，除非有两个子菜单children才会消失

Any additional comments (optional)

文档上面写的是根据key值，但我看到key值其实也不一样啊

[Whbbit1999]

你的v-for="item in userApps"导致生成了多个d-menu，可以试试我这种写法。使用template在d-menu中循环就不会出现你那种问题啦

<template>
  <div class="layout-nav">
    <div class="layout-nav-content">
      <d-menu :multiple="false" mode="vertical" router>
        <template v-for="item in userApps">
          <d-menu-item
            :key="item.redirect"
            v-if="item.children != undefined && item.redirect"
          >
            <template #icon>
              <i class="icon-system"></i>
            </template>
            {{ item.meta?.title }}
          </d-menu-item>

          <d-sub-menu
            :key="item.path"
            :title="item.meta?.title"
            v-if="item.children != undefined && item.redirect == undefined"
          >
            <template #icon>
              <i class="icon-system"></i>
            </template>
            <d-menu-item
              v-for="children in item.children"
              :key="`${item.path}/${children.path}`"
            >
              <template #icon>
                <i class="icon-system"></i>
              </template>
              {{ children.meta?.title }}
            </d-menu-item>
          </d-sub-menu>
        </template>
      </d-menu>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";

const user = useRouter();

let userApps = ref(user.options.routes);
userApps.value.forEach((item: any) => {
  if (item.meta.hidden != undefined) {
    item.isChild = true;
  } else {
    item.isChild = false;
  }
});

console.log(userApps, "---");
</script>

<style lang="scss" scoped>
.layout-nav {
  position: relative;
  z-index: 2;
  width: 210px;
  height: calc(100vh - 50px);
  overflow: hidden;
  background: #fff;

  .devui-menu {
    border-right: 0px;
  }
}

.layout-nav-content {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: auto;
}

.layout-nav-content::-webkit-scrollbar {
  width: 4px;
}

.layout-nav-content::-webkit-scrollbar-track {
  background-color: #fff;
  /* 滚动条背景颜色 */
}

.layout-nav-content::-webkit-scrollbar-thumb {
  background-color: rgb(211, 211, 211);
  /* 滑块颜色 */
  border-radius: 10px;
  /* 滑块边角的弧度 */
}

.layout-nav::-webkit-scrollbar-thumb:hover {
  background-color: rgb(211, 211, 211);
  /* 悬停时滑块颜色 */
}
</style>

[fdf-hash]

已解决 @Whbbit1999