布局
vue-mooc布局方式我们采用最普遍的header + main + footer的形式，它们的基础框架如下所示：
header
main
html代码：
<mooc-container>
<mooc-header>header</mooc-header>
<mooc-main>main</mooc-main>
<mooc-footer>footer</mooc-footer>
</mooc-container>
<div class="layout-sidebar">sidebar</div>
我们将对以上布局具体的业务含义进行如下解释：
header：放置公共头部，包含logo，导航，搜索和登录等模块。main：放置路由部分，即：router-view。footer：放置底部版权等相关信息。sidebar：放置侧边栏信息。
封装布局公共组件
布局公共组件借鉴了element-ui中的布局容器，根据项目实际情况进行的改造，并没有百分百实现element-ui中布局容器组件的功能。
针对以上布局方式的要求，我们借鉴element-ui中关于布局容器的组件，进行如下封装
mooc-container对应el-container。mooc-header对应el-header。mooc-main对应el-main。mooc-footer对应el-foooter。
如果你对改造后布局容器组件感兴趣的话，那么你可以在src/base/container，src/base/header，src/base/main和src/base/footer等目录找到它们。
使用布局公共组件
由于所有公共组件已经全部全局注册，所以我们只需要在App.vue文件中使用即可，像下面这样：
App.vue中的代码在这里只做示例使用，其代码会在涉及到的模块中一一介绍。
html代码：
<template>
<div id="app" :style="getStyle">
<!-- content -->
<mooc-container>
<mooc-header height="72px">
<m-header />
</mooc-header>
<mooc-main>
<router-view />
</mooc-main>
<mooc-footer height="120px">
<m-footer />
</mooc-footer>
</mooc-container>
<!-- sidebar -->
<m-sidebar />
<!-- back to top -->
<mooc-backtop :show-height="500"></mooc-backtop>
<!-- login -->
<login v-if="showLogin" @maskClick="handleMaskClick" />
</div>
</template>
JavaScript代码：
import MHeader from 'components/header/index.vue'
import MFooter from 'components/footer/footer.vue'
import MSidebar from 'components/sidebar/sidebar.vue'
import { mapGetters, mapMutations } from 'vuex'
import { scrollMixin } from 'assets/js/mixin.js'
export default {
name: 'App',
mixins: [scrollMixin],
computed: {
getStyle () {
return {
'max-height': this.showLogin ? '100%' : '',
'overflow': this.showLogin ? 'hidden' : ''
}
},
...mapGetters(['showLogin'])
},
methods: {
handleMaskClick () {
this.setShowLogin(!this.showLogin)
},
...mapMutations({
'setShowLogin': 'login/SET_SHOW_LOGIN'
})
},
components: {
MHeader,
MFooter,
MSidebar,
Login: () => import('components/login/login.vue')
}
}
← Divider 分割线 侧边栏 →