<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">
|
<!-- <el-radio></el-radio>-->
|
{{ item.label }}
|
</el-menu-item>
|
</template>
|
</template>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
name: 'BaseNavMenuItem',
|
data () {
|
return {}
|
},
|
props: {
|
menuList: Array
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.el-menu--popup {
|
min-width: 100px;
|
}
|
.base-nav-menu {
|
height: 38px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
outline: none;
|
border: none;
|
//margin-left: 20px;
|
padding: 0;
|
.el-menu--popup {
|
min-width: 100px;
|
}
|
}
|
|
.el-menu--horizontal {
|
.el-menu--popup {
|
min-width: 100px;
|
}
|
}
|
</style>
|
