<template>
|
<div v-if="!item.hidden">
|
<template
|
v-if="
|
hasOneShowingChild(item.childList, item) &&
|
(!onlyOneChild.childList || onlyOneChild.noShowingChildren) &&
|
!item.alwaysShow
|
"
|
>
|
<router-link v-if="onlyOneChild" :to="onlyOneChild.component">
|
<el-menu-item :index="resolvePath(onlyOneChild.component)" :class="{ 'submenu-title-noDropdown': !isNest }">
|
<!-- <span v-if="activeMenu===resolvePath(onlyOneChild.component)" class="cur-icon"><span class="dot"/></span>
|
<span v-else class="cur-empty"/>-->
|
<item :icon="onlyOneChild.extra || (item.meta && item.extra)" :title="onlyOneChild.name"/>
|
</el-menu-item>
|
</router-link>
|
</template>
|
<el-submenu v-else ref="subMenu" :index="resolvePath(item.component)" popper-append-to-body>
|
<template slot="title">
|
<item v-if="item" :icon="item && item.icon" :title="item.name"/>
|
</template>
|
<sidebar-item
|
v-for="(childs, i) in item.childList"
|
:key="i"
|
:is-nest="true"
|
:item="childs"
|
:base-path="resolvePath(childs.component)"
|
class="nest-menu"
|
/>
|
</el-submenu>
|
</div>
|
</template>
|
|
<script>
|
import path from 'path';
|
import {isExternal} from '@/utils/validate';
|
import Item from './Item';
|
import AppLink from './Link';
|
import FixiOSBug from './FixiOSBug';
|
|
export default {
|
name: 'SidebarItem',
|
components: {Item, AppLink},
|
mixins: [FixiOSBug],
|
props: {
|
// route object
|
item: {
|
type: Object,
|
required: true,
|
},
|
isNest: {
|
type: Boolean,
|
default: false,
|
},
|
basePath: {
|
type: String,
|
default: '',
|
},
|
},
|
data() {
|
// To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
|
// TODO: refactor with render function
|
this.onlyOneChild = null;
|
return {};
|
},
|
// mounted(){
|
// console.log('kkkk',this.item)
|
// },
|
mounted() {
|
},
|
computed: {
|
activeMenu() {
|
const route = this.$route
|
const {meta, path} = route
|
// if set path, the sidebar will highlight the path you set
|
if (meta.activeMenu) {
|
return meta.activeMenu
|
}
|
return path
|
}
|
},
|
methods: {
|
hasOneShowingChild(childList = [], parent) {
|
const showingChildren = childList.filter((item) => {
|
if (item.hidden) {
|
return false;
|
} else {
|
// Temp set(will be used if only has one showing childList)
|
this.onlyOneChild = item;
|
return true;
|
}
|
});
|
|
// When there is only one childList router, the childList router is displayed by default
|
if (showingChildren.length === 1) {
|
return true;
|
}
|
|
// Show parent if there are no childList router to display
|
if (showingChildren.length === 0) {
|
this.onlyOneChild = {...parent, path: '', noShowingChildren: true};
|
return true;
|
}
|
|
return false;
|
},
|
resolvePath(routePath) {
|
// console.log(this.item);
|
// console.log("............" + routePath);
|
if (isExternal(routePath)) {
|
return routePath;
|
}
|
if (isExternal(this.basePath)) {
|
return this.basePath;
|
}
|
// console.log(this.basePath, routePath)
|
return path.resolve(this.basePath, routePath);
|
},
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
> > > .el-submenu__title {
|
height: 35px;
|
line-height: 35px;
|
}
|
|
> > > .is-opened .el-submenu__title {
|
background-color: #ECF2FF;
|
color: #0d997c;
|
|
i {
|
color: #0d997c
|
}
|
}
|
/*
|
> > > .el-menu-item {
|
padding-left: 5px !important;
|
}*/
|
|
> > > .el-menu-item:hover, .el-menu-item:focus {
|
background: #fff;
|
color: #0d997c;
|
}
|
|
.cur-icon {
|
display: inline-block;
|
width: 10px;
|
height: 10px;
|
border-radius: 5px;
|
border: 1px solid #0d997c;
|
position: relative;
|
|
.dot {
|
position: absolute;
|
top: 2px;
|
left: 2px;
|
display: inline-block;
|
width: 4px;
|
height: 4px;
|
border-radius: 2px;
|
background-color: #0d997c;
|
}
|
}
|
|
.cur-empty {
|
display: inline-block;
|
width: 10px;
|
height: 10px;
|
}
|
</style>
|
