no message

Former-commit-id: 97588181639c43522d616322e4291756b508e54e
Former-commit-id: aaf11f7e65ced4adee6ff85b5f93d39971e7f00e
Former-commit-id: d9613ae962e9c304acb5de0d04ee2dd06c4210bf
This commit is contained in:
liyang
2018-06-10 09:09:51 +08:00
parent 12c8b6ac23
commit 3eb7640a3d
7 changed files with 85 additions and 11 deletions

View File

@@ -12,10 +12,10 @@
<script> <script>
import menus from '@/menu/index.js' import menus from '@/menu/index.js'
export default { export default {
name: 'd2-layout-main-header-menu', name: 'd2-layout-main-menu-header',
components: { components: {
'd2-menu-item': () => import('../d2-menu-item/index.vue'), 'd2-menu-item': () => import('../d2-menu-item/index.vue'),
'd2-sub-menu': () => import('../d2-sub-menu/index.vue') 'd2-menu-sub': () => import('../d2-menu-sub/index.vue')
}, },
data () { data () {
return { return {

View File

@@ -0,0 +1,26 @@
<template>
<el-menu
mode="horizontal"
:router="true">
<template v-for="(menu, menuIndex) in menus">
<d2-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
<d2-submenu v-else :menu="menu" :key="menuIndex"/>
</template>
</el-menu>
</template>
<script>
import menus from '@/menu/index.js'
export default {
name: 'd2-layout-main-menu-header',
components: {
'd2-menu-item': () => import('../-menu-item/index.vue'),
'd2-menu-sub': () => import('../-menu-sub/index.vue')
},
data () {
return {
menus
}
}
}
</script>

View File

@@ -0,0 +1,48 @@
<template>
<div>
<el-menu
:collapse="collapse"
:unique-opened="true"
:router="true">
<template v-for="(menu, menuIndex) in menus">
<d2-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
<d2-submenu v-else :menu="menu" :key="menuIndex"/>
</template>
</el-menu>
<!-- <div v-if="sideMenu.filter(e => e.title).length === 0 && !collapse" class="d2-menu-side-empty">
没有菜单
</div> -->
</div>
</template>
<script>
import { side } from '@/menu/index.js'
export default {
name: 'd2-layout-main-menu-side',
props: {
collapse: {
type: Boolean,
required: false,
default: false
}
},
components: {
'd2-menu-item': () => import('../-menu-item/index.vue'),
'd2-menu-sub': () => import('../-menu-sub/index.vue')
},
data () {
return {
menus: []
}
},
watch: {
'$route.matched': {
handler (val) {
const path = val[0].path
this.menus = side.filter(menu => menu.path === path)
},
immediate: true
}
}
}
</script>

View File

@@ -13,7 +13,7 @@
<script> <script>
export default { export default {
name: 'd2-sub-menu', name: 'd2-menu-sub',
props: { props: {
menu: { menu: {
type: Object, type: Object,
@@ -22,7 +22,7 @@ export default {
} }
}, },
components: { components: {
'd2-menu-item': () => import('../d2-menu-item/index.vue') 'd2-menu-item': () => import('../-menu-item/index.vue')
} }
} }
</script> </script>

View File

@@ -9,7 +9,7 @@
<d2-submenu v-else :menu="menu" :key="menuIndex"/> <d2-submenu v-else :menu="menu" :key="menuIndex"/>
</template> </template>
</el-menu> </el-menu>
<!-- <div v-if="sideMenu.filter(e => e.title).length === 0 && !collapse" class="d2-side-menu-empty"> <!-- <div v-if="sideMenu.filter(e => e.title).length === 0 && !collapse" class="d2-menu-side-empty">
没有菜单 没有菜单
</div> --> </div> -->
</div> </div>
@@ -18,7 +18,7 @@
<script> <script>
import { side } from '@/menu/index.js' import { side } from '@/menu/index.js'
export default { export default {
name: 'd2-layout-main-side-menu', name: 'd2-layout-main-menu-side',
props: { props: {
collapse: { collapse: {
type: Boolean, type: Boolean,
@@ -28,7 +28,7 @@ export default {
}, },
components: { components: {
'd2-menu-item': () => import('../d2-menu-item/index.vue'), 'd2-menu-item': () => import('../d2-menu-item/index.vue'),
'd2-sub-menu': () => import('../d2-sub-menu/index.vue') 'd2-menu-sub': () => import('../d2-menu-sub/index.vue')
}, },
data () { data () {
return { return {

View File

@@ -9,14 +9,14 @@
<div class="toggle-aside-btn" @click="collapse = !collapse"> <div class="toggle-aside-btn" @click="collapse = !collapse">
<d2-icon name="bars"/> <d2-icon name="bars"/>
</div> </div>
<d2-layout-main-header-menu/> <d2-layout-main-menu-header/>
<d2-layout-main-header-right/> <d2-layout-main-header-right/>
</el-header> </el-header>
<!-- 下面 主体 --> <!-- 下面 主体 -->
<el-container> <el-container>
<!-- 主体 侧边栏 --> <!-- 主体 侧边栏 -->
<el-aside :style="{width: collapse ? asideWidthCollapse : asideWidth}"> <el-aside :style="{width: collapse ? asideWidthCollapse : asideWidth}">
<d2-layout-main-side-menu :collapse="collapse"/> <d2-layout-main-menu-side :collapse="collapse"/>
</el-aside> </el-aside>
<!-- 主体 --> <!-- 主体 -->
<el-main> <el-main>
@@ -32,8 +32,8 @@
export default { export default {
name: 'd2-layout-main', name: 'd2-layout-main',
components: { components: {
'd2-layout-main-side-menu': () => import('./components/side-menu'), 'd2-layout-main-menu-side': () => import('./components/-menu-side'),
'd2-layout-main-header-menu': () => import('./components/-header-menu'), 'd2-layout-main-menu-header': () => import('./components/-menu-header'),
'd2-layout-main-header-right': () => import('./components/-header-right') 'd2-layout-main-header-right': () => import('./components/-header-right')
}, },
data () { data () {