先看一下最后的效果
折叠后 image.png
可以看页面可以分为三部分,左边的sidebar、上面的topbar、和内容appMain
来看一下我代码的结构
image.png
上代码
// sidebar.vue
<template>
<div class="sidebar-container" :class="{'collapse-width': isCollapse}">
<div class="logo" :class="{'collapse-logo': isCollapse}">
LOGO
</div>
<el-menu
:default-active="onRoutes"
class="el-menu-vertical"
background-color="#304156"
text-color="#bfcbd9"
active-text-color="#10B9D3"
mode="vertical"
:collapse="isCollapse"
unique-opened
router
>
<el-menu-item index="dashboard">
<i class="el-icon-menu"></i>
<span slot="title">控制面板</span>
</el-menu-item>
<el-menu-item index="link1">
<i class="el-icon-menu"></i>
<span slot="title">导航一</span>
</el-menu-item>
<el-menu-item index="link2">
<i class="el-icon-document"></i>
<span slot="title">导航二</span>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
computed: {
onRoutes() {
return this.$route.path.replace("/", "");
},
...mapState({
isCollapse: (state) => state.common.isCollapse
})
},
methods: {}
}
</script>
<style lang="scss" scoped>
.collapse-width {
width: 64px !important;
}
.collapse-logo {
font-size: 18px !important;
}
.sidebar-container {
width: 180px;
height: 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
transition: width 0.28s;
z-index: 1001;
overflow: hidden;
.el-menu-vertical:not(.el-menu--collapse) {
width: 180px;
}
.el-menu {
border: none;
height: 100%;
width: 100% !important;
overflow-y: auto;
}
.logo {
width: 100%;
height: 50px;
line-height: 50px;
font-size: 30px;
text-align: center;
background-color: rgb(48, 65, 86);
color: #fff;
}
}
</style>
// topbar.vue
<template>
<div class="topbar-container">
<div class="toggle-btn" @click="toggleSidebar">
<i class="fa fa-navicon"></i>
</div>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import BreadCrumd from './breadCrumd'
export default {
data() {
return {
}
},
components: {
BreadCrumd
},
computed: {
...mapState({
isCollapse: (state) => state.common.isCollapse
})
},
methods: {
...mapActions(['toggleSidebar'])
}
}
</script>
<style lang="scss" scoped>
.topbar-container {
width: 100%;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #ccc;
background-color: #fff;
.toggle-btn {
display: inline-block;
padding: 0 20px;
}
}
</style>
// appMain.vue
<template>
<div class="app-main-container">
<transition name="fade-transform" mode="out-in">
<router-view></router-view>
</transition>
</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.app-main-container {
position: absolute;
width: 100%;
height: calc(100% - 70px);
margin: 10px;
padding: 20px;
background-color: #fff;
}
</style>
// 组装三个组件的index.vue
<template>
<div>
<SideBar></SideBar>
<div class="right-container" :class="{'collapse-ml': isCollapse}">
<TopBar></TopBar>
<AppMain></AppMain>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import SideBar from './sideBar'
import TopBar from './TopBar/index'
import AppMain from './appMain'
export default {
computed: {
...mapState({
isCollapse: (state) => state.common.isCollapse
})
},
components: {
SideBar,
TopBar,
AppMain
}
}
</script>
<style lang="scss" scoped>
.right-container{
width: 100%;
min-height: 100%;
margin-left: 180px;
transition: margin-left 0.28s;
}
.collapse-ml{
margin-left: 64px
}
</style>
// vuex common.js
const common = {
state: {
isCollapse: false
},
mutations: {
// 折叠侧边栏
TOGGLE_SIDEBAR(state) {
state.isCollapse = !state.isCollapse
}
},
actions: {
toggleSidebar({ commit }) {
commit('TOGGLE_SIDEBAR')
}
}
}
export default common
后面会将实现的代码上传到码云
网友评论