优化菜单
这里存在一个bug,修复如下:
修改src\components\baseline\menu\src\index.vue
<template>
<div>
<el-menu
class="el-menu-vertical-demo"
:default-active="defaultActive"
:router="router"
v-bind="$attrs"
>
<template v-for="(item, index) in data" :key="index">
<!-- 一级无二级菜单的菜单栏 -->
<el-menu-item
v-if="!item.children || !item.children.length"
:index="item.index"
>
<component v-if="item.icon" :is="item.icon"></component>
<span>{{ item.name }}</span>
</el-menu-item>
<el-sub-menu
v-if="item.children && item.children.length"
:index="item.index"
>
<template #title>
<component v-if="item.icon" :is="item.icon"></component>
<span>{{ item.name }}</span>
</template>
<!-- 二级菜单栏 -->
<el-menu-item
v-for="(item2, index2) in item.children"
:index="item2.index"
>
<component
v-if="item2.icon"
:is="item2.icon"
></component>
<span>{{ item2.name }}</span>
</el-menu-item>
</el-sub-menu>
</template>
</el-menu>
</div>
</template>
<script lang="ts" setup>
import { PropType } from 'vue'
import { MenuItem } from './types'
const props = defineProps({
//说明:
data: {
required: true,
type: Array as PropType<MenuItem[]>,
},
// 默认选中的菜单
defaultActive: {
type: String,
default: '',
},
//是否是路由模式 router,
//是否启用 vue-router 模式
//启用该模式会在激活导航时以 index 作为 path 进行路由跳转
router: {
type: Boolean,
default: false,
},
})
// console.log('data:', props.data)
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 2rem;
min-height: 4rem;
}
svg {
margin-right:
评论: