refactor[ScrollBar]: use el-scrollbar (#646)
parent
f9d510ea78
commit
99d53ee0ca
|
@ -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>
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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',
|
||||||
|
|
Loading…
Reference in New Issue