You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.3 KiB
80 lines
2.3 KiB
<template>
|
|
<el-submenu v-if="menu.children && menu.children.length >= 1" :index="menu.id" :popper-append-to-body="false">
|
|
<template slot="title">
|
|
<svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
|
|
<span>{{ menu.name }}</span>
|
|
<span v-if="menu.redPoint" class="red-point"></span>
|
|
</template>
|
|
<sub-menu v-for="item in menu.children" :key="item.id" :menu="item"></sub-menu>
|
|
</el-submenu>
|
|
<el-menu-item v-else :index="menu.id" @click="gotoRouteHandle(menu.id)">
|
|
<svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true"><use :xlink:href="`#${menu.icon}`"></use></svg>
|
|
<span>{{ menu.name }}</span>
|
|
<span class="num" v-if="menu.num && menu.num > 0">{{menu.num}}</span>
|
|
</el-menu-item>
|
|
</template>
|
|
|
|
<script>
|
|
import SubMenu from './main-sidebar-sub-menu'
|
|
export default {
|
|
name: 'sub-menu',
|
|
props: {
|
|
menu: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
components: {
|
|
SubMenu
|
|
},
|
|
methods: {
|
|
// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
|
|
gotoRouteHandle (menuId) {
|
|
var route = window.SITE_CONFIG['dynamicMenuRoutes'].filter(item => item.meta.menuId === menuId)[0]
|
|
if (route) {
|
|
this.$router.push({ name: route.name })
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.red-point {
|
|
width: 5px;
|
|
height: 5px;
|
|
background: #FF4C52;
|
|
border-radius: 50%;
|
|
margin-left: 10px;
|
|
display: inline-block;
|
|
}
|
|
.num {
|
|
margin-left: 10px;
|
|
background: #FF4C52;
|
|
color: #ffffff;
|
|
min-width: 20px;
|
|
height: 20px;
|
|
display: inline-block;
|
|
line-height: 14px;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
font-size: 12px;
|
|
padding: 4px;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
// .el-menu{
|
|
// background: linear-gradient(90deg, #1A5AFD, #26C4FF) !important;
|
|
// }
|
|
// .aui-sidebar .aui-sidebar__inner .el-menu .el-submenu .el-menu{
|
|
// background: red !important;
|
|
// }
|
|
// .el-menu.el-menu--inline .el-menu-item{
|
|
// background-color: #191A2B !important;
|
|
// }
|
|
.el-menu-item.is-active {
|
|
background: linear-gradient(90deg, #1A5AFD, #26C4FF) !important;
|
|
// font-size: 14px;
|
|
// font-weight: bold;
|
|
}
|
|
</style>
|
|
|