refactor:add scroll-bar to sidebar

This commit is contained in:
Pan 2017-11-06 16:02:13 +08:00
parent 7451ed6299
commit 7e1ba16d12
5 changed files with 70 additions and 12 deletions

View file

@ -0,0 +1,54 @@
<template>
<div class='scroll-container' ref='scrollContainer' @mousewheel="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) {
e.preventDefault()
const $container = this.$refs.scrollContainer
const $containerHeight = $container.offsetHeight
const $wrapper = this.$refs.scrollWrapper
const $wrapperHeight = $wrapper.offsetHeight
if (e.wheelDelta > 0) {
this.top = Math.min(0, this.top + e.wheelDelta)
} else {
if ($containerHeight - delta < $wrapperHeight) {
if (this.top < -($wrapperHeight - $containerHeight + delta)) {
this.top = this.top
} else {
this.top = Math.max(this.top + e.wheelDelta, $containerHeight - $wrapperHeight - delta)
}
} else {
this.top = 0
}
}
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.scroll-container {
position: relative;
width: 100%;
height: 100%;
background-color: #545c64;
.scroll-wrapper {
position: absolute;
width: 100%;
}
}
</style>

View file

@ -21,7 +21,6 @@ export default {
const $containerWidth = $container.offsetWidth
const $wrapper = this.$refs.scrollWrapper
const $wrapperWidth = $wrapper.offsetWidth
console.log($containerWidth, $wrapperWidth)
if (e.wheelDelta > 0) {
this.left = Math.min(0, this.left + e.wheelDelta)
} else {

View file

@ -14,10 +14,6 @@
bottom: 0;
left: 0;
z-index: 1001;
overflow-y: auto;
&::-webkit-scrollbar {
display: none
}
a {
display: inline-block;
width: 100%;
@ -27,12 +23,13 @@
}
.el-menu {
border: none;
width: 100%;
}
}
.hideSidebar {
.sidebar-container {
.sidebar-container,.sidebar-container .el-menu {
width: 36px!important;
overflow: inherit;
// overflow: inherit;
}
.main-container {
margin-left: 36px;

View file

@ -2,7 +2,7 @@
<el-menu class="navbar" mode="horizontal">
<hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
<levelbar></levelbar>
<levelbar class="levelbar-container"></levelbar>
<div class="right-menu">
@ -111,6 +111,9 @@ export default {
float: left;
padding: 0 10px;
}
.levelbar-container{
float: left;
}
.errLog-container {
display: inline-block;
vertical-align: top;

View file

@ -1,14 +1,19 @@
<template>
<el-menu mode="vertical" unique-opened :default-active="$route.path" :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<scroll-bar>
<el-menu mode="vertical" unique-opened :default-active="$route.path" :collapse="isCollapse" background-color="#545c64" text-color="#fff"
active-text-color="#ffd04b">
<sidebar-item :routes='permission_routers'></sidebar-item>
</el-menu>
</scroll-bar>
</template>
<script>
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'
import ScrollBar from '@/components/ScrollBar'
export default {
components: { SidebarItem },
components: { SidebarItem, ScrollBar },
computed: {
...mapGetters([
'permission_routers',