From 0e4ea0871c73fc204828fb010c47ff958e251e5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= Date: Wed, 2 May 2018 14:43:20 +0800 Subject: [PATCH] feat[sidebar]: add resonsive sidebar (#636) --- src/store/getters.js | 1 + src/store/modules/app.js | 19 +++++++++++- src/styles/sidebar.scss | 33 ++++++++++++++++++-- src/views/layout/Layout.vue | 14 ++++++++- src/views/layout/mixin/ResizeHandler.js | 41 +++++++++++++++++++++++++ 5 files changed, 104 insertions(+), 4 deletions(-) create mode 100644 src/views/layout/mixin/ResizeHandler.js diff --git a/src/store/getters.js b/src/store/getters.js index 8adc5e81..d68251fd 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -1,6 +1,7 @@ const getters = { sidebar: state => state.app.sidebar, language: state => state.app.language, + device: state => state.app.device, visitedViews: state => state.tagsView.visitedViews, cachedViews: state => state.tagsView.cachedViews, token: state => state.user.token, diff --git a/src/store/modules/app.js b/src/store/modules/app.js index 9eed667c..d89664f8 100644 --- a/src/store/modules/app.js +++ b/src/store/modules/app.js @@ -3,8 +3,10 @@ import Cookies from 'js-cookie' const app = { state: { sidebar: { - opened: !+Cookies.get('sidebarStatus') + opened: !+Cookies.get('sidebarStatus'), + withoutAnimation: false }, + device: 'desktop', language: Cookies.get('language') || 'en' }, mutations: { @@ -15,6 +17,15 @@ const app = { Cookies.set('sidebarStatus', 0) } state.sidebar.opened = !state.sidebar.opened + state.sidebar.withoutAnimation = false + }, + CLOSE_SIDEBAR: (state, withoutAnimation) => { + Cookies.set('sidebarStatus', 1) + state.sidebar.opened = false + state.sidebar.withoutAnimation = withoutAnimation + }, + TOGGLE_DEVICE: (state, device) => { + state.device = device }, SET_LANGUAGE: (state, language) => { state.language = language @@ -25,6 +36,12 @@ const app = { toggleSideBar({ commit }) { commit('TOGGLE_SIDEBAR') }, + closeSideBar({ commit }, { withoutAnimation }) { + commit('CLOSE_SIDEBAR', withoutAnimation) + }, + toggleDevice({ commit }, device) { + commit('TOGGLE_DEVICE', device) + }, setLanguage({ commit }, language) { commit('SET_LANGUAGE', language) } diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index f1f719f6..d69c4347 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -1,11 +1,13 @@ #app { + // 主体区域 .main-container { min-height: 100%; transition: margin-left .28s; margin-left: 180px; } - // 侧边栏 + + // 侧边栏 .sidebar-container { .horizontal-collapse-transition { transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; @@ -32,6 +34,7 @@ width: 100% !important; } } + .hideSidebar { .sidebar-container { width: 36px !important; @@ -62,7 +65,8 @@ } } } - .sidebar-container .nest-menu .el-submenu > .el-submenu__title, + + .sidebar-container .nest-menu .el-submenu>.el-submenu__title, .sidebar-container .el-submenu .el-menu-item { min-width: 180px !important; background-color: $subMenuBg !important; @@ -73,4 +77,29 @@ .el-menu--collapse .el-menu .el-submenu { min-width: 180px !important; } + + //适配移动端 + .mobile { + .main-container { + margin-left: 0px; + } + .sidebar-container { + top: 50px; + transition: transform .28s; + width: 180px !important; + } + &.hideSidebar { + .sidebar-container { + transition-duration: 0.3s; + transform: translate3d(-180px, 0, 0); + } + } + } + + .withoutAnimation { + .main-container, + .sidebar-container { + transition: none; + } + } } diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue index 7c824531..8c2dba8f 100644 --- a/src/views/layout/Layout.vue +++ b/src/views/layout/Layout.vue @@ -1,5 +1,5 @@