赞
踩
学习的框架: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
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。