no message

Former-commit-id: ab7d7209674559ded34a11e3f727d2765920c69c
Former-commit-id: 8984a5d39d7b202d31c94c44a06ad52cc349db04
Former-commit-id: 968e58cc9c04636a9be9a17c0c64ccd828d848fe
This commit is contained in:
liyang
2018-06-04 11:03:45 +08:00
parent 0a7223a9c9
commit f18cd637b4
3 changed files with 16 additions and 70 deletions

View File

@@ -94,15 +94,9 @@ $theme-color: #EFF4F8;
text-align: center;
color: $color-text-sub;
}
.dd-side-menu {
&:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
}
// [菜单] 正常状态
.el-menu {
background-color: red;
background-color: transparent;
border-right: none;
.el-submenu__title {
&:hover {
@@ -112,7 +106,7 @@ $theme-color: #EFF4F8;
}
// [菜单] 折叠状态
.el-menu--collapse {
background-color: blue;
background-color: transparent;
.el-submenu__title {
text-align: center;
}

View File

@@ -1,76 +1,29 @@
<template>
<el-menu
class="el-menu-demo"
mode="horizontal">
<el-menu-item index="index" @click.native="active({name: 'index'})">首页</el-menu-item>
mode="horizontal"
:router="true">
<el-menu-item
v-for="(item, index) in menu"
:key="index"
:index="String(index)"
@click.native="active(item)">
{{item.title}}
v-for="menu in menus"
:key="menu.path"
:index="menu.path">
首页
</el-menu-item>
</el-menu>
</template>
<script>
import { mapMutations } from 'vuex'
import { menu, router } from '@/router/menu/index.js'
export default {
data () {
return {
menu,
router
}
},
computed: {
// 当前路由的name
// 仅仅是返回当前的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
})
menus: [
{path: '/index', title: '首页'},
{path: '/demo/plugins', title: '插件'},
{path: '/demo/components', title: '组件'},
{path: '/demo/chart', title: '图表'},
{path: '/demo/business', title: '示例业务界面'}
]
}
}
}
</script>

View File

@@ -2,7 +2,6 @@
<div>
<el-menu
v-if="sideMenu.filter(e => e.title).length > 0"
class="dd-side-menu"
:collapse="collapse"
:unique-opened="true">
<template v-for="(menu, index) in sideMenu">