yang
4 years ago
parent
1a65c0044e
commit
5673b48cb0
@ -1,286 +1,301 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="sidebar-container">
|
<div class="sidebar-container">
|
||||||
<div
|
<div
|
||||||
:style="{ 'padding-top': createButtonTitle != '' ? '40px' : '25px', 'background-color':variables.menuBg }"
|
:style="{ 'padding-top': createButtonTitle != '' ? '40px' : '25px', 'background-color':variables.menuBg }"
|
||||||
class="create-button-container">
|
class="create-button-container">
|
||||||
<el-popover
|
<el-popover
|
||||||
v-if="createButtonTitle != ''"
|
v-if="createButtonTitle != ''"
|
||||||
:offset="addOffset"
|
:offset="addOffset"
|
||||||
:visible-arrow="false"
|
:visible-arrow="false"
|
||||||
:disabled="!$slots.add"
|
:disabled="!$slots.add"
|
||||||
placement="right"
|
placement="right"
|
||||||
popper-class="no-padding-popover"
|
popper-class="no-padding-popover"
|
||||||
trigger="hover">
|
trigger="hover">
|
||||||
<slot name="add" />
|
<slot name="add" />
|
||||||
<div
|
<div
|
||||||
slot="reference"
|
slot="reference"
|
||||||
class="create-button"
|
class="create-button"
|
||||||
@click="quicklyCreate">
|
@click="quicklyCreate">
|
||||||
<div
|
<div
|
||||||
v-show="!buttonCollapse"
|
v-show="!buttonCollapse"
|
||||||
class="button-name">{{ createButtonTitle }}</div>
|
class="button-name">{{ createButtonTitle }}</div>
|
||||||
<div
|
<div
|
||||||
v-show="!buttonCollapse"
|
v-show="!buttonCollapse"
|
||||||
class="button-line" />
|
class="button-line" />
|
||||||
<i
|
<i
|
||||||
:class="createButtonIcon"
|
:class="createButtonIcon"
|
||||||
class="button-mark" />
|
class="button-mark" />
|
||||||
</div>
|
</div>
|
||||||
</el-popover>
|
</el-popover>
|
||||||
</div>
|
</div>
|
||||||
<el-scrollbar
|
<el-scrollbar
|
||||||
:style="{'border-right-color': variables.menuBg, 'padding-top': createButtonTitle != '' ? '90px' : '40px'}"
|
:style="{'border-right-color': variables.menuBg, 'padding-top': createButtonTitle != '' ? '90px' : '40px'}"
|
||||||
wrap-class="scrollbar-wrapper">
|
wrap-class="scrollbar-wrapper">
|
||||||
<el-menu
|
<el-menu
|
||||||
:default-active="activeMenu"
|
:default-active="activeMenu"
|
||||||
:collapse="collapse"
|
:collapse="collapse"
|
||||||
:background-color="variables.menuBg"
|
:background-color="variables.menuBg"
|
||||||
:text-color="variables.menuText"
|
:text-color="variables.menuText"
|
||||||
:active-text-color="variables.menuActiveText"
|
:active-text-color="variables.menuActiveText"
|
||||||
:style="{ paddingBottom: paddingBottom}"
|
:style="{ paddingBottom: paddingBottom}"
|
||||||
mode="vertical"
|
mode="vertical"
|
||||||
class="el-menu-vertical"
|
class="el-menu-vertical"
|
||||||
@select="handleSelect">
|
@select="handleSelect">
|
||||||
<sidebar-item
|
<sidebar-item
|
||||||
v-for="(route, index) in items"
|
v-for="(route, index) in items"
|
||||||
:key="`${route.path}${index}`"
|
:key="`${route.path}${index}`"
|
||||||
:item="route"
|
:item="route"
|
||||||
:collapse="collapse"
|
:collapse="collapse"
|
||||||
:base-path="route.path"
|
:base-path="route.path"
|
||||||
:active-menu="activeMenu" />
|
:active-menu="activeMenu" />
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
<slot name="bottom"/>
|
<slot name="bottom"/>
|
||||||
<div
|
<div
|
||||||
:style="{ 'background-color':variables.menuBg }"
|
:style="{ 'background-color':variables.menuBg }"
|
||||||
class="sidebar-bottom">
|
class="sidebar-bottom">
|
||||||
<div class="sidebar-container">
|
<div class="sidebar-bottom-content">
|
||||||
<img
|
<div v-if="!collapse" class="copyright">
|
||||||
:style="{ 'right': buttonCollapse ? '3px' : '0' }"
|
<img src="/favicon.ico" width="20px" >
|
||||||
:class="{ 'is-close': collapse }"
|
<span>Power by 悟空</span>
|
||||||
class="collapse-button"
|
</div>
|
||||||
src="@/assets/img/collapse_white.png"
|
<img
|
||||||
alt=""
|
:style="{ 'right': buttonCollapse ? '3px' : '0' }"
|
||||||
@click="toggleSideBarClick">
|
:class="{ 'is-close': collapse }"
|
||||||
</div>
|
class="collapse-button"
|
||||||
</div>
|
src="@/assets/img/collapse_white.png"
|
||||||
</div>
|
alt=""
|
||||||
</template>
|
@click="toggleSideBarClick">
|
||||||
|
</div>
|
||||||
<script>
|
</div>
|
||||||
import { mapGetters } from 'vuex'
|
</div>
|
||||||
import SidebarItem from './SidebarItem'
|
</template>
|
||||||
import variables from './variables.scss'
|
|
||||||
|
<script>
|
||||||
export default {
|
import { mapGetters } from 'vuex'
|
||||||
components: { SidebarItem },
|
import SidebarItem from './SidebarItem'
|
||||||
props: {
|
import variables from './variables.scss'
|
||||||
items: {
|
|
||||||
type: Array,
|
export default {
|
||||||
default: () => {
|
components: { SidebarItem },
|
||||||
return []
|
props: {
|
||||||
}
|
items: {
|
||||||
},
|
type: Array,
|
||||||
addOffset: {
|
default: () => {
|
||||||
type: Number,
|
return []
|
||||||
default: 70
|
}
|
||||||
},
|
},
|
||||||
createButtonTitle: {
|
addOffset: {
|
||||||
type: String,
|
type: Number,
|
||||||
default: ''
|
default: 70
|
||||||
},
|
},
|
||||||
createButtonIcon: {
|
createButtonTitle: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'el-icon-plus'
|
default: ''
|
||||||
},
|
},
|
||||||
// 防止菜单被底部布局遮住
|
createButtonIcon: {
|
||||||
paddingBottom: {
|
type: String,
|
||||||
type: String,
|
default: 'el-icon-plus'
|
||||||
default: '48px'
|
},
|
||||||
}
|
// 防止菜单被底部布局遮住
|
||||||
},
|
paddingBottom: {
|
||||||
data() {
|
type: String,
|
||||||
return {
|
default: '48px'
|
||||||
buttonCollapse: false
|
}
|
||||||
}
|
},
|
||||||
},
|
data() {
|
||||||
computed: {
|
return {
|
||||||
...mapGetters(['collapse']),
|
buttonCollapse: false
|
||||||
activeMenu() {
|
}
|
||||||
const route = this.$route
|
},
|
||||||
const { meta, path, params } = route
|
computed: {
|
||||||
|
...mapGetters(['collapse']),
|
||||||
let title = this.WKConfig.companyName
|
activeMenu() {
|
||||||
if (meta.title) {
|
const route = this.$route
|
||||||
title += ' - ' + meta.title
|
const { meta, path, params } = route
|
||||||
} else if (params && params.title) {
|
|
||||||
title += ' - ' + params.title
|
let title = this.WKConfig.companyName
|
||||||
}
|
if (meta.title) {
|
||||||
document.title = title
|
title += ' - ' + meta.title
|
||||||
// if set path, the sidebar will highlight the path you set
|
} else if (params && params.title) {
|
||||||
if (meta.activeMenu) {
|
title += ' - ' + params.title
|
||||||
return meta.activeMenu
|
}
|
||||||
}
|
document.title = title
|
||||||
return path
|
// if set path, the sidebar will highlight the path you set
|
||||||
},
|
if (meta.activeMenu) {
|
||||||
variables() {
|
return meta.activeMenu
|
||||||
return variables
|
}
|
||||||
}
|
return path
|
||||||
},
|
},
|
||||||
watch: {
|
variables() {
|
||||||
collapse: function(val) {
|
return variables
|
||||||
if (val) {
|
}
|
||||||
this.buttonCollapse = val
|
},
|
||||||
} else {
|
watch: {
|
||||||
setTimeout(() => {
|
collapse: function(val) {
|
||||||
this.buttonCollapse = val
|
if (val) {
|
||||||
}, 300)
|
this.buttonCollapse = val
|
||||||
}
|
} else {
|
||||||
}
|
setTimeout(() => {
|
||||||
},
|
this.buttonCollapse = val
|
||||||
mounted() {
|
}, 300)
|
||||||
this.buttonCollapse = this.collapse
|
}
|
||||||
},
|
}
|
||||||
methods: {
|
},
|
||||||
toggleSideBarClick() {
|
mounted() {
|
||||||
this.$store.commit('SET_COLLAPSE', !this.collapse)
|
this.buttonCollapse = this.collapse
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
// 快速创建
|
toggleSideBarClick() {
|
||||||
quicklyCreate() {
|
this.$store.commit('SET_COLLAPSE', !this.collapse)
|
||||||
this.$emit('quicklyCreate')
|
},
|
||||||
},
|
|
||||||
|
// 快速创建
|
||||||
handleSelect(key, keyPath) {
|
quicklyCreate() {
|
||||||
this.$emit('select', key, keyPath)
|
this.$emit('quicklyCreate')
|
||||||
}
|
},
|
||||||
}
|
|
||||||
}
|
handleSelect(key, keyPath) {
|
||||||
</script>
|
this.$emit('select', key, keyPath)
|
||||||
<style lang="scss" scoped>
|
}
|
||||||
@import './variables.scss';
|
}
|
||||||
|
}
|
||||||
.sidebar-container {
|
</script>
|
||||||
transition: width 0.28s;
|
<style lang="scss" scoped>
|
||||||
width: auto;
|
@import './variables.scss';
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
.sidebar-container {
|
||||||
background-color: $menuBg;
|
transition: width 0.28s;
|
||||||
overflow: auto;
|
width: auto;
|
||||||
flex-shrink: 0;
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
.scrollbar-wrapper {
|
background-color: $menuBg;
|
||||||
overflow-x: hidden !important;
|
overflow: auto;
|
||||||
}
|
flex-shrink: 0;
|
||||||
|
|
||||||
.el-scrollbar {
|
.scrollbar-wrapper {
|
||||||
height: 100%;
|
overflow-x: hidden !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
.el-scrollbar {
|
||||||
display: inline-block;
|
height: 100%;
|
||||||
width: 100%;
|
}
|
||||||
overflow: hidden;
|
|
||||||
}
|
a {
|
||||||
}
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
.el-menu-vertical:not(.el-menu--collapse) {
|
overflow: hidden;
|
||||||
width: 200px;
|
}
|
||||||
min-height: 400px;
|
}
|
||||||
}
|
|
||||||
|
.el-menu-vertical:not(.el-menu--collapse) {
|
||||||
.el-menu-vertical {
|
width: 200px;
|
||||||
height: 100%;
|
min-height: 400px;
|
||||||
overflow-y: auto;
|
}
|
||||||
overflow-y: overlay;
|
|
||||||
overflow-x: hidden;
|
.el-menu-vertical {
|
||||||
padding-bottom: 48px;
|
height: 100%;
|
||||||
border-right-color: $menuBg;
|
overflow-y: auto;
|
||||||
}
|
overflow-y: overlay;
|
||||||
|
overflow-x: hidden;
|
||||||
.el-menu-vertical.el-menu--collapse {
|
padding-bottom: 48px;
|
||||||
/deep/ .el-submenu__icon-arrow {
|
border-right-color: $menuBg;
|
||||||
display: none;
|
}
|
||||||
}
|
|
||||||
|
.el-menu-vertical.el-menu--collapse {
|
||||||
/deep/ .el-submenu__title {
|
/deep/ .el-submenu__icon-arrow {
|
||||||
span {
|
display: none;
|
||||||
display: none;
|
}
|
||||||
}
|
|
||||||
}
|
/deep/ .el-submenu__title {
|
||||||
}
|
span {
|
||||||
|
display: none;
|
||||||
// 创建
|
}
|
||||||
|
}
|
||||||
.create-button-container {
|
}
|
||||||
padding: 15px 14px;
|
|
||||||
color: white;
|
// 创建
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
.create-button-container {
|
||||||
position: absolute;
|
padding: 15px 14px;
|
||||||
top: 0;
|
color: white;
|
||||||
left: 0;
|
font-size: 14px;
|
||||||
right: 0;
|
cursor: pointer;
|
||||||
z-index: 2;
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
.create-button {
|
right: 0;
|
||||||
display: flex;
|
z-index: 2;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
box-sizing: border-box;
|
.create-button {
|
||||||
padding: 0 15px;
|
display: flex;
|
||||||
height: 36px;
|
align-items: center;
|
||||||
border-radius: $xr-border-radius-base;
|
justify-content: center;
|
||||||
background-color: rgba($color: #fff, $alpha: 0.1);
|
box-sizing: border-box;
|
||||||
color: #999;
|
padding: 0 15px;
|
||||||
|
height: 36px;
|
||||||
.button-name {
|
border-radius: $xr-border-radius-base;
|
||||||
flex: 1;
|
background-color: rgba($color: #fff, $alpha: 0.1);
|
||||||
}
|
color: #999;
|
||||||
|
|
||||||
.button-line {
|
.button-name {
|
||||||
height: 10px;
|
flex: 1;
|
||||||
background-color: white;
|
}
|
||||||
width: 1px;
|
|
||||||
margin: 0 20px 0 10px;
|
.button-line {
|
||||||
opacity: 0.3;
|
height: 10px;
|
||||||
}
|
background-color: white;
|
||||||
|
width: 1px;
|
||||||
.button-mark {
|
margin: 0 20px 0 10px;
|
||||||
width: 12px;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
.button-mark {
|
||||||
.create-button:hover {
|
width: 12px;
|
||||||
color: white !important;
|
}
|
||||||
background-color: $xr-color-primary !important;
|
}
|
||||||
}
|
|
||||||
}
|
.create-button:hover {
|
||||||
|
color: white !important;
|
||||||
// 底部按钮
|
background-color: $xr-color-primary !important;
|
||||||
.sidebar-bottom {
|
}
|
||||||
position: absolute;
|
}
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
// 底部按钮
|
||||||
right: 0;
|
.sidebar-bottom {
|
||||||
height: 48px;
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
.sidebar-container {
|
left: 0;
|
||||||
position: relative;
|
right: 0;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
}
|
|
||||||
}
|
&-content {
|
||||||
|
position: relative;
|
||||||
.collapse-button {
|
height: 48px;
|
||||||
position: absolute;
|
}
|
||||||
top: 0;
|
|
||||||
padding: 18px 20px;
|
.copyright {
|
||||||
cursor: pointer;
|
color: white;
|
||||||
}
|
font-size: 12px;
|
||||||
|
height: 100%;
|
||||||
.collapse-button.is-close {
|
padding-left: 20px;
|
||||||
transform: rotate(180deg);
|
line-height: 3.5;
|
||||||
}
|
img,span {
|
||||||
</style>
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-button {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
padding: 18px 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-button.is-close {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in new issue