<template>
|
<div class="base-menu-item-comp">
|
<el-submenu
|
v-if="hasChildren()"
|
:index="item.menuHref"
|
:class="`level-${level}`"
|
>
|
<template slot="title">
|
<i v-if="item.menuIcon" :class="item.menuIcon"></i>
|
<span class="base-menu-item-comp__title">{{ item.menuName }}</span>
|
</template>
|
<base-menu-item
|
v-for="(data, index) in item.children"
|
:key="index"
|
:item="data"
|
:super-path="resolvePath(item.menuHref)"
|
:level="level + 1"
|
></base-menu-item>
|
</el-submenu>
|
<el-menu-item v-else :index="resolvePath(item.menuHref)" @click="goRoute">
|
<i v-if="item.menuIcon" :class="item.menuIcon"></i>
|
<span class="title">{{ item.menuName }}</span>
|
</el-menu-item>
|
</div>
|
</template>
|
|
<script>
|
import path from 'path'
|
|
export default {
|
name: 'BaseMenuItem',
|
props: {
|
item: {
|
type: Object,
|
required: true,
|
},
|
superPath: {
|
type: String,
|
default: '/',
|
},
|
level: {
|
type: Number,
|
default: 0,
|
},
|
},
|
methods: {
|
hasChildren() {
|
if (this.item.children && this.item.children.length > 0) {
|
return true
|
}
|
return false
|
},
|
goRoute() {
|
if (this.item.menuHref.includes('http')) {
|
window.open(this.item.menuHref, '_blank')
|
} else if (this.item.menuHref.startsWith('/')) {
|
this.$router.push(this.item.menuHref)
|
} else {
|
this.$router.push(this.resolvePath(this.item.menuHref))
|
}
|
},
|
resolvePath(route) {
|
if (route.includes('http') || route.startsWith('/')) {
|
return route
|
}
|
return path.join(this.superPath, route).replace(/\\/g, '/')
|
},
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.base-menu-item-comp {
|
i {
|
color: #fff;
|
font-size: 14px;
|
margin-right: 16px;
|
}
|
::v-deep .el-submenu__icon-arrow {
|
color: #fff;
|
}
|
.el-submenu {
|
@for $i from 1 through 4 {
|
.el-menu-item {
|
padding-left: 64px !important;
|
}
|
.el-submenu.level-#{$i} {
|
::v-deep {
|
.el-submenu__title {
|
@if $i==0 {
|
padding-left: 20px !important;
|
} @else {
|
padding-left: 32px * ($i + 1) !important;
|
}
|
}
|
}
|
.el-menu-item {
|
@if $i==0 {
|
padding-left: 64px !important;
|
} @else {
|
padding-left: 32px * ($i + 1) + 10px !important;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
