From 99d53ee0cad3ad416199606d035c750c588c6afa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= <panfree23@gmail.com>
Date: Sat, 5 May 2018 15:26:08 +0800
Subject: [PATCH] refactor[ScrollBar]: use el-scrollbar (#646)
---
src/components/ScrollBar/index.vue | 57 -------------------
src/styles/sidebar.scss | 49 ++++++++++------
src/views/layout/Layout.vue | 15 +++++
src/views/layout/components/Sidebar/index.vue | 7 +--
4 files changed, 49 insertions(+), 79 deletions(-)
delete mode 100644 src/components/ScrollBar/index.vue
diff --git a/src/components/ScrollBar/index.vue b/src/components/ScrollBar/index.vue
deleted file mode 100644
index dc32f5c0..00000000
--- a/src/components/ScrollBar/index.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<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>
-
-<script>
-const delta = 15
-
-export default {
- name: 'scrollBar',
- data() {
- return {
- top: 0
- }
- },
- methods: {
- handleScroll(e) {
- const eventDelta = e.wheelDelta || -e.deltaY * 3
- const $container = this.$refs.scrollContainer
- const $containerHeight = $container.offsetHeight
- const $wrapper = this.$refs.scrollWrapper
- const $wrapperHeight = $wrapper.offsetHeight
- if (eventDelta > 0) {
- this.top = Math.min(0, this.top + eventDelta)
- } else {
- if ($containerHeight - delta < $wrapperHeight) {
- if (this.top < -($wrapperHeight - $containerHeight + delta)) {
- this.top = this.top
- } else {
- this.top = Math.max(this.top + eventDelta, $containerHeight - $wrapperHeight - delta)
- }
- } else {
- this.top = 0
- }
- }
- }
- }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-@import '../../styles/variables.scss';
-
-.scroll-container {
- position: relative;
- width: 100%;
- height: 100%;
- background-color: $menuBg;
- .scroll-wrapper {
- position: absolute;
- width: 100%!important;
- }
-}
-</style>
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index d69c4347..26cece0c 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -1,18 +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;
- }
- transition: width .28s;
+ transition: width 0.28s;
width: 180px !important;
height: 100%;
position: fixed;
@@ -22,19 +17,33 @@
left: 0;
z-index: 1001;
overflow: hidden;
+ //reset element-ui css
+ .horizontal-collapse-transition {
+ transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+ }
+ .scrollbar-wrapper {
+ height: calc(100% + 15px);
+ .el-scrollbar__view {
+ height: 100%;
+ }
+ }
+ .is-horizontal {
+ display: none;
+ }
a {
display: inline-block;
width: 100%;
+ overflow: hidden;
}
.svg-icon {
margin-right: 16px;
}
.el-menu {
border: none;
+ height: 100%;
width: 100% !important;
}
}
-
.hideSidebar {
.sidebar-container {
width: 36px !important;
@@ -50,22 +59,28 @@
}
}
.el-submenu {
+ overflow: hidden;
&>.el-submenu__title {
padding-left: 10px !important;
- &>span {
- height: 0;
- width: 0;
- overflow: hidden;
- visibility: hidden;
- display: inline-block;
- }
.el-submenu__icon-arrow {
display: none;
}
}
}
+ .el-menu--collapse {
+ .el-submenu {
+ &>.el-submenu__title {
+ &>span {
+ height: 0;
+ width: 0;
+ overflow: hidden;
+ visibility: hidden;
+ display: inline-block;
+ }
+ }
+ }
+ }
}
-
.sidebar-container .nest-menu .el-submenu>.el-submenu__title,
.sidebar-container .el-submenu .el-menu-item {
min-width: 180px !important;
@@ -84,7 +99,6 @@
margin-left: 0px;
}
.sidebar-container {
- top: 50px;
transition: transform .28s;
width: 180px !important;
}
@@ -95,7 +109,6 @@
}
}
}
-
.withoutAnimation {
.main-container,
.sidebar-container {
diff --git a/src/views/layout/Layout.vue b/src/views/layout/Layout.vue
index 8c2dba8f..284de9c1 100644
--- a/src/views/layout/Layout.vue
+++ b/src/views/layout/Layout.vue
@@ -1,5 +1,6 @@
<template>
<div class="app-wrapper" :class="classObj">
+ <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
<sidebar class="sidebar-container"></sidebar>
<div class="main-container">
<navbar></navbar>
@@ -36,6 +37,11 @@ export default {
mobile: this.device === 'mobile'
}
}
+ },
+ methods: {
+ handleClickOutside() {
+ this.$store.dispatch('closeSideBar', { withoutAnimation: false })
+ }
}
}
</script>
@@ -48,4 +54,13 @@ export default {
height: 100%;
width: 100%;
}
+ .drawer-bg {
+ background: #000;
+ opacity: 0.3;
+ width: 100%;
+ top: 0;
+ height: 100%;
+ position: absolute;
+ z-index: 999;
+ }
</style>
diff --git a/src/views/layout/components/Sidebar/index.vue b/src/views/layout/components/Sidebar/index.vue
index 007e792d..d006d656 100644
--- a/src/views/layout/components/Sidebar/index.vue
+++ b/src/views/layout/components/Sidebar/index.vue
@@ -1,5 +1,5 @@
<template>
- <scroll-bar>
+ <el-scrollbar wrapClass="scrollbar-wrapper">
<el-menu
mode="vertical"
:show-timeout="200"
@@ -11,16 +11,15 @@
>
<sidebar-item :routes="permission_routers"></sidebar-item>
</el-menu>
- </scroll-bar>
+ </el-scrollbar>
</template>
<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
-import ScrollBar from '@/components/ScrollBar'
export default {
- components: { SidebarItem, ScrollBar },
+ components: { SidebarItem },
computed: {
...mapGetters([
'permission_routers',
--
GitLab