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; 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;
} }

View File

@@ -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>

View File

@@ -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">