no message
Former-commit-id: 97588181639c43522d616322e4291756b508e54e Former-commit-id: aaf11f7e65ced4adee6ff85b5f93d39971e7f00e Former-commit-id: d9613ae962e9c304acb5de0d04ee2dd06c4210bf
This commit is contained in:
@@ -12,10 +12,10 @@
|
||||
<script>
|
||||
import menus from '@/menu/index.js'
|
||||
export default {
|
||||
name: 'd2-layout-main-header-menu',
|
||||
name: 'd2-layout-main-menu-header',
|
||||
components: {
|
||||
'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 () {
|
||||
return {
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'd2-sub-menu',
|
||||
name: 'd2-menu-sub',
|
||||
props: {
|
||||
menu: {
|
||||
type: Object,
|
||||
@@ -22,7 +22,7 @@ export default {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'd2-menu-item': () => import('../d2-menu-item/index.vue')
|
||||
'd2-menu-item': () => import('../-menu-item/index.vue')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -9,7 +9,7 @@
|
||||
<d2-submenu v-else :menu="menu" :key="menuIndex"/>
|
||||
</template>
|
||||
</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>
|
||||
@@ -18,7 +18,7 @@
|
||||
<script>
|
||||
import { side } from '@/menu/index.js'
|
||||
export default {
|
||||
name: 'd2-layout-main-side-menu',
|
||||
name: 'd2-layout-main-menu-side',
|
||||
props: {
|
||||
collapse: {
|
||||
type: Boolean,
|
||||
@@ -28,7 +28,7 @@ export default {
|
||||
},
|
||||
components: {
|
||||
'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 () {
|
||||
return {
|
||||
|
||||
@@ -9,14 +9,14 @@
|
||||
<div class="toggle-aside-btn" @click="collapse = !collapse">
|
||||
<d2-icon name="bars"/>
|
||||
</div>
|
||||
<d2-layout-main-header-menu/>
|
||||
<d2-layout-main-menu-header/>
|
||||
<d2-layout-main-header-right/>
|
||||
</el-header>
|
||||
<!-- 下面 主体 -->
|
||||
<el-container>
|
||||
<!-- 主体 侧边栏 -->
|
||||
<el-aside :style="{width: collapse ? asideWidthCollapse : asideWidth}">
|
||||
<d2-layout-main-side-menu :collapse="collapse"/>
|
||||
<d2-layout-main-menu-side :collapse="collapse"/>
|
||||
</el-aside>
|
||||
<!-- 主体 -->
|
||||
<el-main>
|
||||
@@ -32,8 +32,8 @@
|
||||
export default {
|
||||
name: 'd2-layout-main',
|
||||
components: {
|
||||
'd2-layout-main-side-menu': () => import('./components/side-menu'),
|
||||
'd2-layout-main-header-menu': () => import('./components/-header-menu'),
|
||||
'd2-layout-main-menu-side': () => import('./components/-menu-side'),
|
||||
'd2-layout-main-menu-header': () => import('./components/-menu-header'),
|
||||
'd2-layout-main-header-right': () => import('./components/-header-right')
|
||||
},
|
||||
data () {
|
||||
|
||||
Reference in New Issue
Block a user