<template>
|
<div class="base-nav-menu">
|
<template v-for="(item,index) in menuList">
|
<template v-if="item.items && item.items.length">
|
<el-submenu :index="item.index" :key="index">
|
<template slot="title" v-if="item.icon">
|
<img :src="item.icon" :title="item.label"/>
|
</template>
|
<template slot="title" v-else>{{item.label}}</template>
|
<base-nav-menu-item v-for="child in item.items" :key="child.title" :menuList='[child]'></base-nav-menu-item>
|
</el-submenu>
|
</template>
|
<template v-else>
|
<el-menu-item :index="item.index" :key="index">
|
{{ item.label }}
|
</el-menu-item>
|
</template>
|
</template>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
name: 'BaseNavMenuItem',
|
data () {
|
return {}
|
},
|
props: {
|
menuList: Array
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.base-nav-menu {
|
height: 38px;
|
line-height: 38px;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
outline: none;
|
border: none;
|
|
.el-submenu {
|
.el-submenu__title {
|
border-radius: 50%;
|
|
.el-icon-arrow-down {
|
display: none;
|
}
|
|
}
|
}
|
}
|
</style>
|
