refactor[ScrollBar]: use el-scrollbar (#646)

pull/546/head^2
花裤衩 2018-05-05 15:26:08 +08:00 committed by GitHub
parent f9d510ea78
commit 99d53ee0ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 49 additions and 79 deletions

View File

@ -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>

View File

@ -1,18 +1,13 @@
#app { #app {
// //
.main-container { .main-container {
min-height: 100%; min-height: 100%;
transition: margin-left .28s; transition: margin-left .28s;
margin-left: 180px; margin-left: 180px;
} }
// //
.sidebar-container { .sidebar-container {
.horizontal-collapse-transition { transition: width 0.28s;
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
}
transition: width .28s;
width: 180px !important; width: 180px !important;
height: 100%; height: 100%;
position: fixed; position: fixed;
@ -22,19 +17,33 @@
left: 0; left: 0;
z-index: 1001; z-index: 1001;
overflow: hidden; 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 { a {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
overflow: hidden;
} }
.svg-icon { .svg-icon {
margin-right: 16px; margin-right: 16px;
} }
.el-menu { .el-menu {
border: none; border: none;
height: 100%;
width: 100% !important; width: 100% !important;
} }
} }
.hideSidebar { .hideSidebar {
.sidebar-container { .sidebar-container {
width: 36px !important; width: 36px !important;
@ -50,8 +59,17 @@
} }
} }
.el-submenu { .el-submenu {
overflow: hidden;
&>.el-submenu__title { &>.el-submenu__title {
padding-left: 10px !important; padding-left: 10px !important;
.el-submenu__icon-arrow {
display: none;
}
}
}
.el-menu--collapse {
.el-submenu {
&>.el-submenu__title {
&>span { &>span {
height: 0; height: 0;
width: 0; width: 0;
@ -59,13 +77,10 @@
visibility: hidden; visibility: hidden;
display: inline-block; display: inline-block;
} }
.el-submenu__icon-arrow {
display: none;
} }
} }
} }
} }
.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 { .sidebar-container .el-submenu .el-menu-item {
min-width: 180px !important; min-width: 180px !important;
@ -84,7 +99,6 @@
margin-left: 0px; margin-left: 0px;
} }
.sidebar-container { .sidebar-container {
top: 50px;
transition: transform .28s; transition: transform .28s;
width: 180px !important; width: 180px !important;
} }
@ -95,7 +109,6 @@
} }
} }
} }
.withoutAnimation { .withoutAnimation {
.main-container, .main-container,
.sidebar-container { .sidebar-container {

View File

@ -1,5 +1,6 @@
<template> <template>
<div class="app-wrapper" :class="classObj"> <div class="app-wrapper" :class="classObj">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
<sidebar class="sidebar-container"></sidebar> <sidebar class="sidebar-container"></sidebar>
<div class="main-container"> <div class="main-container">
<navbar></navbar> <navbar></navbar>
@ -36,6 +37,11 @@ export default {
mobile: this.device === 'mobile' mobile: this.device === 'mobile'
} }
} }
},
methods: {
handleClickOutside() {
this.$store.dispatch('closeSideBar', { withoutAnimation: false })
}
} }
} }
</script> </script>
@ -48,4 +54,13 @@ export default {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 999;
}
</style> </style>

View File

@ -1,5 +1,5 @@
<template> <template>
<scroll-bar> <el-scrollbar wrapClass="scrollbar-wrapper">
<el-menu <el-menu
mode="vertical" mode="vertical"
:show-timeout="200" :show-timeout="200"
@ -11,16 +11,15 @@
> >
<sidebar-item :routes="permission_routers"></sidebar-item> <sidebar-item :routes="permission_routers"></sidebar-item>
</el-menu> </el-menu>
</scroll-bar> </el-scrollbar>
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem' import SidebarItem from './SidebarItem'
import ScrollBar from '@/components/ScrollBar'
export default { export default {
components: { SidebarItem, ScrollBar }, components: { SidebarItem },
computed: { computed: {
...mapGetters([ ...mapGetters([
'permission_routers', 'permission_routers',