fix: 组件

zhangxiao

2024-08-21 406a398a94d54b854472063f219ae87e8fcf4a98

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
32
33
34
35
36
37
38
39
40
41
42
43
44
<template>
    <a-menu v-model:open-keys="openKeys" v-model:selected-keys="selectedKeys" class="app-menu" :mode="props.mode">
        <template v-for="item in props.routeList" :key="item.path">
            <menu-item :route="item" />
        </template>
    </a-menu>
</template>
<script lang="ts" setup name="Menu">
import MenuItem from "./menu-item.vue";
import { getRouteParent } from "@/packages/vue-router";
import { RouteConfig } from "types";
 
const props = withDefaults(
    defineProps<{
        routeList: RouteConfig[];
        mode?: "vertical" | "horizontal";
    }>(),
    {
        mode: "vertical"
    }
);
 
const route = useRoute();
 
const openKeys = ref<string[]>([]);
const selectedKeys = ref<string[]>([]);
 
watch(
    () => route.path,
    () => {
        const matched = getRouteParent();
        openKeys.value = matched.map((item) => item.path);
        selectedKeys.value = matched.map((item) => item.path);
    },
    {
        immediate: true
    }
);
</script>
<style lang="scss" scoped>
.app-menu {
    user-select: none;
}
</style>