forked from AkkomaGang/admin-fe
refactor:add scroll-bar to sidebar
This commit is contained in:
parent
7451ed6299
commit
7e1ba16d12
5 changed files with 70 additions and 12 deletions
54
src/components/ScrollBar/index.vue
Normal file
54
src/components/ScrollBar/index.vue
Normal 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>
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Reference in a new issue