# 个性化
# 导航模式
目前脚手架开发支持两种菜单导航模式，可在系统设置中切换。
# 导航切换
两种导航展示如下：
# 横版菜单
# 竖版菜单
若目前提供脚手架菜导航模式不满足业务需求，可在如下模块新增自己的导航逻辑
见 src/base/gd-layout 布局文件，源码如下
<template>
<gl-container class="nav-layout">
<!-- 导航区 -->
<gl-header :isPadding="false" class="nav-layout__header">
<nav-header />
</gl-header>
<!-- 内容区 -->
<gl-container class="nav-container">
<nav-aside v-if="layoutType === 'line'" />
<gl-main :isPadding="false" class="nav-layout__main">
<nav-main />
</gl-main>
</gl-container>
</gl-container>
</template>
<script>
import NavAside from './components/sidebar/index.vue'
import NavHeader from './components/header/index.vue'
import NavMain from './components/main/index.vue'
export default {
name: 'NavLayout',
components: {
NavAside,
NavHeader,
NavMain
},
computed: {
layoutType() {
// 可在此处添加定义自己的导航类型
return this.$store.getters['base/getLayoutType']
}
}
}
</script>
<style lang="scss" scoped>
.nav-layout {
height: 100%;
&__header {
padding: 0;
height: 48px !important;
}
&__main {
overflow: hidden;
padding: 0;
flex: 1;
}
.nav-container {
height: 0;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
全局菜单数据以存储到 Session Storage 可通过如下方式调用获取 绘制自定义导航菜单
// 获取主菜单数据
const mainMenu = this.$store.getters["auth/getMainMenu"];
1
2
2