嗯 导航栏,,没错,,,要动态的。。。嗯。。自己封装了个分组的动态导航栏
<template>
<fragment>
<template v-for="(subMenu, subIndex) in navList">
<!--只有一级菜单-->
<el-menu-item v-if="!subMenu.children" :key="subIndex" :index="subMenu.path">
<i color="#FFFFFF" class="el-icon-location"></i>
<span slot="title">{{ subMenu.name }}</span>
</el-menu-item>
<el-submenu v-else :index="subMenu.path + ''" :key="subMenu.path+subIndex">
<template slot="title">
<i class="el-icon-menu"></i>
<span >{{ subMenu.name }}</span>
</template>
<el-menu-item-group>
<span slot="title" v-show="drawer">{{ subMenu.name }}</span>
<ZtMenuItem v-if="subMenu.children&&subMenu.children.length>0"
:nav-list="subMenu.children" />
<el-menu-item v-else :index="subMenu.path">
<i class="el-icon-location"></i>
<span slot="title">{{subMenu.name}} </span>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</template>
</fragment>
</template>
<script>
export default {
name: "ZtMenuItem",
props:{
navList:{
type:Array,
default:()=>{return []}
},
drawer:{
type:Boolean,
default:true,
}
}
}
</script>
<style scoped lang="less">
</style>
使用:
<el-menu
:default-active="activeIndex"
@select="handleSelect"
router
class="el-menu-vertical-nav color-white"
text-color="#FFFFFF"
active-text-color="#FFFFFF"
:background-color="drawer ? '#14191F' : 'transparent'"
:show-timeout="50"
:hide-timeout="50"
:collapse="drawer">
<z-item :nav-list="navList"
:drawer="drawer"
></z-item>
</el-menu>
注意,,使用了vue fragment 这样再引用子组件的时候不会多加一层div 导致文字无法收起的bug
引入 : npm install --save vue-fragment
使用 在 main.js 中
import Fragment from 'vue-fragment' ;
Vue.use(Fragment.Plugin);
说下 我用的时webpack cil3 建立的项目了