no message
Former-commit-id: ab7d7209674559ded34a11e3f727d2765920c69c Former-commit-id: 8984a5d39d7b202d31c94c44a06ad52cc349db04 Former-commit-id: 968e58cc9c04636a9be9a17c0c64ccd828d848fe
This commit is contained in:
@@ -94,15 +94,9 @@ $theme-color: #EFF4F8;
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
color: $color-text-sub;
|
color: $color-text-sub;
|
||||||
}
|
}
|
||||||
.dd-side-menu {
|
|
||||||
&:not(.el-menu--collapse) {
|
|
||||||
width: 200px;
|
|
||||||
min-height: 400px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// [菜单] 正常状态
|
// [菜单] 正常状态
|
||||||
.el-menu {
|
.el-menu {
|
||||||
background-color: red;
|
background-color: transparent;
|
||||||
border-right: none;
|
border-right: none;
|
||||||
.el-submenu__title {
|
.el-submenu__title {
|
||||||
&:hover {
|
&:hover {
|
||||||
@@ -112,7 +106,7 @@ $theme-color: #EFF4F8;
|
|||||||
}
|
}
|
||||||
// [菜单] 折叠状态
|
// [菜单] 折叠状态
|
||||||
.el-menu--collapse {
|
.el-menu--collapse {
|
||||||
background-color: blue;
|
background-color: transparent;
|
||||||
.el-submenu__title {
|
.el-submenu__title {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,76 +1,29 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-menu
|
<el-menu
|
||||||
class="el-menu-demo"
|
mode="horizontal"
|
||||||
mode="horizontal">
|
:router="true">
|
||||||
<el-menu-item index="index" @click.native="active({name: 'index'})">首页</el-menu-item>
|
|
||||||
<el-menu-item
|
<el-menu-item
|
||||||
v-for="(item, index) in menu"
|
v-for="menu in menus"
|
||||||
:key="index"
|
:key="menu.path"
|
||||||
:index="String(index)"
|
:index="menu.path">
|
||||||
@click.native="active(item)">
|
首页
|
||||||
{{item.title}}
|
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapMutations } from 'vuex'
|
|
||||||
import { menu, router } from '@/router/menu/index.js'
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
menu,
|
menus: [
|
||||||
router
|
{path: '/index', title: '首页'},
|
||||||
}
|
{path: '/demo/plugins', title: '插件'},
|
||||||
},
|
{path: '/demo/components', title: '组件'},
|
||||||
computed: {
|
{path: '/demo/chart', title: '图表'},
|
||||||
// 当前路由的name
|
{path: '/demo/business', title: '示例业务界面'}
|
||||||
// 仅仅是返回当前的name而已
|
]
|
||||||
routeName () {
|
|
||||||
return this.$route.name
|
|
||||||
},
|
|
||||||
// 不管当前路由是不是顶级菜单 都返回这个路由所属的顶级菜单对象的name
|
|
||||||
// 如果返回 null 代表这个路由不是在菜单里显示的路由
|
|
||||||
routeTopLevelName () {
|
|
||||||
if (this.router.find(e => e.name === this.routeName)) {
|
|
||||||
return this.routeName
|
|
||||||
} else {
|
|
||||||
const find = this.router.find(e => e.children.find(child => child.name === this.routeName))
|
|
||||||
return find ? find.name : null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 返回当前对象对应的顶级菜单下的所有子菜单 这些菜单可以在侧边栏菜单中直接使用
|
|
||||||
// 如果返回 null 代表这个路由没有对应的一级路由也就没有菜单
|
|
||||||
routeTopLevelMenu () {
|
|
||||||
return this.routeTopLevelName ? this.menu.find(e => e.name === this.routeTopLevelName).children : null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
routeName () {
|
|
||||||
this.refreshSideMenu()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
this.refreshSideMenu()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapMutations([
|
|
||||||
'setSideMenu'
|
|
||||||
]),
|
|
||||||
// 更新一次侧边栏
|
|
||||||
refreshSideMenu () {
|
|
||||||
if (this.routeTopLevelMenu) {
|
|
||||||
this.setSideMenu({
|
|
||||||
sideMenu: this.routeTopLevelMenu
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 跳转到某个路由
|
|
||||||
active (item) {
|
|
||||||
this.$router.push({
|
|
||||||
name: item.name
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -2,7 +2,6 @@
|
|||||||
<div>
|
<div>
|
||||||
<el-menu
|
<el-menu
|
||||||
v-if="sideMenu.filter(e => e.title).length > 0"
|
v-if="sideMenu.filter(e => e.title).length > 0"
|
||||||
class="dd-side-menu"
|
|
||||||
:collapse="collapse"
|
:collapse="collapse"
|
||||||
:unique-opened="true">
|
:unique-opened="true">
|
||||||
<template v-for="(menu, index) in sideMenu">
|
<template v-for="(menu, index) in sideMenu">
|
||||||
|
|||||||
Reference in New Issue
Block a user