no message
Former-commit-id: 5969ca450d30978cc805ed09dc41946398b36eab Former-commit-id: 1d94428fb701106a0a4b2ea208d12f5d8ceb0a41 Former-commit-id: fcceb0bbdc4e00d2fa82284a6c690241d189d532
This commit is contained in:
@@ -64,6 +64,15 @@ $color: #409EFF;
|
|||||||
.el-container {
|
.el-container {
|
||||||
// 侧边栏
|
// 侧边栏
|
||||||
.el-aside {
|
.el-aside {
|
||||||
|
.dd-side-menu-empty {
|
||||||
|
background-color: rgba(#000, .03);
|
||||||
|
margin: $margin;
|
||||||
|
margin-top: 0px;
|
||||||
|
border-radius: 4px;
|
||||||
|
line-height: 100px;
|
||||||
|
text-align: center;
|
||||||
|
color: $color-text-sub;
|
||||||
|
}
|
||||||
.el-menu {
|
.el-menu {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
.el-menu-item {
|
.el-menu-item {
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-menu class="el-menu-demo" mode="horizontal">
|
<el-menu
|
||||||
|
class="el-menu-demo"
|
||||||
|
mode="horizontal">
|
||||||
<el-menu-item index="index" @click.native="active({name: 'index'})">首页</el-menu-item>
|
<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="(item, index) in menu"
|
||||||
|
|||||||
@@ -1,33 +1,42 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-menu class="el-menu-vertical-demo" v-bind="elMenu">
|
<div>
|
||||||
<template v-for="(menu, index) in sideMenu">
|
<el-menu
|
||||||
<el-menu-item
|
v-if="sideMenu.length > 0"
|
||||||
v-if="!menu.children"
|
class="dd-side-menu"
|
||||||
:key="index"
|
:collapse="collapse"
|
||||||
:index="`${menu.title}${index}`"
|
:unique-opened="true">
|
||||||
@click.native="$router.push({name: menu.name})">
|
<template v-for="(menu, index) in sideMenu">
|
||||||
<i v-if="menu.icon" :class="'fa fa-' + menu.icon"></i>
|
|
||||||
{{menu.title}}
|
|
||||||
</el-menu-item>
|
|
||||||
<el-submenu
|
|
||||||
v-if="menu.children"
|
|
||||||
:key="index"
|
|
||||||
:index="`${menu.title}${index}`">
|
|
||||||
<template slot="title">
|
|
||||||
<i v-if="menu.icon" :class="'fa fa-' + menu.icon"></i>
|
|
||||||
<span slot="title">{{menu.title}}</span>
|
|
||||||
</template>
|
|
||||||
<el-menu-item
|
<el-menu-item
|
||||||
v-for="(menuItem, menuItemIndex) in menu.children"
|
v-if="!menu.children"
|
||||||
:key="menuItemIndex"
|
:key="index"
|
||||||
:index="`${menuItem.name}${menuItemIndex}`"
|
:index="`${menu.title}${index}`"
|
||||||
@click.native="$router.push({name: menuItem.name})">
|
@click.native="$router.push({name: menu.name})">
|
||||||
<i v-if="menuItem.icon" :class="'fa fa-' + menuItem.icon"></i>
|
<i v-if="menu.icon" :class="'fa fa-' + menu.icon"></i>
|
||||||
{{menuItem.title}}
|
{{menu.title}}
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</el-submenu>
|
<el-submenu
|
||||||
</template>
|
v-if="menu.children"
|
||||||
</el-menu>
|
:key="index"
|
||||||
|
:index="`${menu.title}${index}`">
|
||||||
|
<template slot="title">
|
||||||
|
<i v-if="menu.icon" :class="'fa fa-' + menu.icon"></i>
|
||||||
|
<span slot="title">{{menu.title}}</span>
|
||||||
|
</template>
|
||||||
|
<el-menu-item
|
||||||
|
v-for="(menuItem, menuItemIndex) in menu.children"
|
||||||
|
:key="menuItemIndex"
|
||||||
|
:index="`${menuItem.name}${menuItemIndex}`"
|
||||||
|
@click.native="$router.push({name: menuItem.name})">
|
||||||
|
<i v-if="menuItem.icon" :class="'fa fa-' + menuItem.icon"></i>
|
||||||
|
{{menuItem.title}}
|
||||||
|
</el-menu-item>
|
||||||
|
</el-submenu>
|
||||||
|
</template>
|
||||||
|
</el-menu>
|
||||||
|
<div v-else class="dd-side-menu-empty">
|
||||||
|
没有菜单
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -38,10 +47,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
menu,
|
menu,
|
||||||
router,
|
router,
|
||||||
elMenu: {
|
collapse: false
|
||||||
collapse: false,
|
|
||||||
uniqueOpened: true
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -53,7 +59,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
.dd-side-menu:not(.el-menu--collapse) {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
min-height: 400px;
|
min-height: 400px;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user