学习的框架:https://github.com/PanJiaChen/vue-element-admin
膜拜下大神
作者文章地址:https://segmentfault.com/a/1190000009275424#articleHeader15
<template>
<div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
<sidebar class="sidebar-container"></sidebar>
<div class="main-container">
<navbar></navbar>
<!-- 顶部 -->
<tags-view></tags-view>
<!-- tag -->
<app-main></app-main>
<!-- 主体 -->
</div>
</div>
</template>
##左侧导航栏
import ScrollBar from "@/components/ScrollBar";
这是一个自定义组件,把导航栏包起来了
<template>
<div class="scroll-container" ref="scrollContainer" @wheel.prevent="handleScroll" >
<div class="scroll-wrapper" ref="scrollWrapper" :style="{top: top + 'px'}">
<slot></slot>
</div>
</div>
</template>
在左侧滚动,触发handleScroll函数
http://www.runoob.com/jsref/event-onwheel.html
滚动:
http://www.jb51.net/article/119256.htm
##右侧内容分为上中下
上(控制展开)
mutations: {
TOGGLE_SIDEBAR: state => {
if (state.sidebar.opened) {
Cookies.set('sidebarStatus', 1)
} else {
Cookies.set('sidebarStatus', 0)
}
state.sidebar.opened = !state.sidebar.opened
},
SET_LANGUAGE: (state, language) => { //通过mutations来改变中英文状态
state.language = language
Cookies.set('language', language)
}
},
actions: {
toggleSideBar({ commit }) {
commit('TOGGLE_SIDEBAR')
},
setLanguage({ commit }, language) {
// 通过actions来改变中英文状态 (还是通过commit,调用mutations中的方法)
// 只是在这个方法中可以异步来改变
commit('SET_LANGUAGE', language)
}
}
toggleSideBar() {
this.$store.dispatch('toggleSideBar')
//改变state.sidebar.opened和cookie来展示状态
},
logout() {
this.$store.dispatch('LogOut').then(() => {
location.reload()// In order to re-instantiate the vue-router object to avoid bugs
})
}
上(面包屑)
watch: { //监听路由,路由变化 执行this.getBreadcrumb()
$route() {
this.getBreadcrumb()
}
}
$route: https://router.vuejs.org/zh-cn/api/route-object.html
created() {//钩子函数
this.getBreadcrumb()
}
上(全屏)
http://element.eleme.io/#/zh-CN/component/tooltip
上(换肤)
https://panjiachen.github.io/vue-element-admin-site/#/theme
上(登出)
中(tagView)
Array.from : https://www.cnblogs.com/kongxianghai/p/7417210.html
下(主体)
keep-alive进行缓存
https://segmentfault.com/a/1190000008123035