<template>
|
<a-layout-sider
|
:class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
|
:collapsedWidth="collapsedWidth"
|
:collapsible="collapsible"
|
v-model="collapsed"
|
:trigger="null">
|
|
<div id="menu-container">
|
<logo/>
|
<div class="nav-split-line"></div>
|
<s-menu
|
:collapsed="collapsed"
|
:menu="menus"
|
:theme="theme"
|
@select="onSelect"
|
@updateMenuTitle="onUpdateMenuTitle"
|
:mode="mode"
|
:style="smenuStyle">
|
</s-menu>
|
<div class="nav-split-line"></div>
|
<div class="avatar">
|
<a-avatar :src="getAvatar()" @click="$router.push('/user/UserManagement')"/>
|
</div>
|
</div>
|
|
<a-tooltip placement="right" :mouseLeaveDelay="0">
|
<template slot="title">
|
{{collapsedWidth!==0?'收起':'展开'}}
|
</template>
|
<div id="response-line-container" ref="responseLineContainerRef" @click="handleMenuFoldOrNot">
|
<template v-if="collapsedWidth!==0">
|
<div id="response-line-0"></div>
|
<div id="response-line-1"></div>
|
</template>
|
<template v-else>
|
<div id="response-line-3"></div>
|
<div id="response-line-4"></div>
|
</template>
|
</div>
|
</a-tooltip>
|
|
</a-layout-sider>
|
</template>
|
|
<script>
|
import Logo from '../tools/Logo'
|
import SMenu from './index'
|
import { mixin, mixinDevice } from '@/utils/mixin.js'
|
import { mapGetters } from 'vuex'
|
import { getFileAccessHttpUrl } from '@/api/manage'
|
|
export default {
|
name: 'SideMenu',
|
components: { Logo, SMenu },
|
mixins: [mixin, mixinDevice],
|
data() {
|
return {
|
normalCollapsedWidth: 100,
|
collapsedWidth: 100
|
}
|
},
|
props: {
|
mode: {
|
type: String,
|
required: false,
|
default: 'inline'
|
},
|
theme: {
|
type: String,
|
required: false,
|
default: 'dark'
|
},
|
collapsible: {
|
type: Boolean,
|
required: false,
|
default: false
|
},
|
collapsed: {
|
type: Boolean,
|
required: false,
|
default: false
|
},
|
menus: {
|
type: Array,
|
required: true
|
}
|
},
|
computed: {
|
smenuStyle() {
|
let style = { 'padding': '0' }
|
if (this.fixSiderbar) {
|
style['overflow'] = 'auto'
|
style['overflow'] = 'auto'
|
style['overflow-x'] = 'hidden'
|
}
|
return style
|
}
|
},
|
methods: {
|
...mapGetters(['nickname', 'avatar', 'userInfo']),
|
onSelect(obj) {
|
this.$emit('menuSelect', obj)
|
},
|
onUpdateMenuTitle(obj) {
|
this.$emit('updateMenuTitle', obj)
|
},
|
getAvatar() {
|
return getFileAccessHttpUrl(this.avatar())
|
},
|
handleMenuFoldOrNot() {
|
if (this.collapsedWidth !== 0) {
|
this.collapsedWidth = 0
|
this.$refs.responseLineContainerRef.style.opacity = 1
|
document.querySelector('.sider').onmouseenter = () => false
|
document.querySelector('.sider').onmouseleave = () => false
|
} else {
|
this.collapsedWidth = this.normalCollapsedWidth
|
this.$refs.responseLineContainerRef.style.opacity = 0
|
// 设置透明度后hover鼠标行为失效
|
document.querySelector('.sider').onmouseenter = () => this.$refs.responseLineContainerRef.style.opacity = 1
|
document.querySelector('.sider').onmouseleave = () => this.$refs.responseLineContainerRef.style.opacity = 0
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
/* update_begin author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
|
.sider {
|
@scrollBarSize: 10px;
|
|
#menu-container {
|
background-color: rgba(255, 255, 255, .34);
|
position: absolute;
|
top: 50%;
|
right: 0;
|
transform: translateY(-50%);
|
border-radius: 12px;
|
/*box-shadow: 2px 2px 7.7px 0 rgba(146, 159, 202, 0.19), 0 0 1px 1px rgba(255, 255, 255, 0.45) inset;*/
|
padding: 10px;;
|
|
/deep/ .ant-menu {
|
background-color: transparent;
|
width: 60px;
|
/* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
|
&::-webkit-scrollbar {
|
width: @scrollBarSize;
|
height: @scrollBarSize;
|
background-color: transparent;
|
display: none;
|
}
|
|
& .-o-scrollbar {
|
display: none;
|
}
|
|
/* 兼容IE */
|
-ms-overflow-style: none;
|
-ms-scroll-chaining: chained;
|
-ms-content-zooming: zoom;
|
-ms-scroll-rails: none;
|
-ms-content-zoom-limit-min: 100%;
|
-ms-content-zoom-limit-max: 500%;
|
-ms-scroll-snap-type: proximity;
|
-ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
|
|
/* 定义滚动条轨道 */
|
&::-webkit-scrollbar-track {
|
background-color: transparent;
|
}
|
|
/* 定义滑块 */
|
&::-webkit-scrollbar-thumb {
|
border-radius: @scrollBarSize;
|
background-color: #eee;
|
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
|
|
&:hover {
|
background-color: #dddddd;
|
}
|
|
&:active {
|
background-color: #bbbbbb;
|
}
|
}
|
}
|
|
/deep/ .ant-menu-inline-collapsed > .ant-menu-item {
|
padding: 0 !important;
|
border-radius: 12px;
|
|
|
a {
|
text-align: center;
|
border-radius: 12px;
|
}
|
.anticon {
|
font-size: 25px;
|
}
|
|
/*导航栏叶子菜单按钮被选中后样式*/
|
&.ant-menu-item-selected {
|
background-color: transparent;
|
a {
|
color: rgba(0, 0, 0, 0.65)
|
}
|
}
|
|
/*导航栏按钮被激活后样式*/
|
&.ant-menu-item-active {
|
background-color: #E7EBF6;
|
a {
|
color: rgba(0, 0, 0, 0.65)
|
}
|
}
|
}
|
|
/*导航栏非叶子菜单按钮被选中后样式*/
|
/deep/ .ant-menu-vertical .ant-menu-submenu-selected {
|
color: rgba(0, 0, 0, 0.65)
|
}
|
|
/*导航栏非叶子菜单按钮被激活后样式*/
|
/deep/ .ant-menu-vertical .ant-menu-submenu-active {
|
.ant-menu-submenu-title {
|
background-color: #E7EBF6;
|
color: rgba(0, 0, 0, 0.65);
|
}
|
}
|
|
/deep/ .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
|
padding: 0 !important;
|
text-align: center;
|
border-radius: 12px;
|
|
.anticon {
|
font-size: 25px;
|
}
|
}
|
|
.nav-split-line {
|
width: 50px;
|
height: 1px;
|
background-color: #E5E5E5;
|
border-radius: 12px;
|
cursor: pointer;
|
margin: 15px auto
|
}
|
|
.avatar {
|
text-align: center;
|
|
/deep/ .ant-avatar {
|
cursor: pointer;
|
}
|
}
|
}
|
|
#response-line-container {
|
width: 12px;
|
height: 26px;
|
position: absolute;
|
right: -20px;
|
top: 50%;
|
transform: translateY(-50%);
|
cursor: pointer;
|
transition: all .2s ease;
|
opacity: 0;
|
|
#response-line-0, #response-line-1 {
|
width: 4px;
|
height: 13px;
|
background-color: #c6c6c6;
|
left: 4px;
|
position: absolute;
|
transition: all .2s ease;
|
}
|
|
#response-line-3 {
|
width: 4px;
|
background-color: #c6c6c6;
|
transform-origin: 50% 0%;
|
transform: rotate(-17deg) translateY(1px);
|
border-top-left-radius: 4px;
|
border-top-right-radius: 4px;
|
border-bottom-right-radius: 10px;
|
height: 16px;
|
left: 4px;
|
top: 0;
|
position: absolute;
|
}
|
|
#response-line-4 {
|
width: 4px;
|
background-color: #c6c6c6;
|
transform-origin: 50% 100%;
|
transform: rotate(17deg) translateY(-1px);
|
border-bottom-left-radius: 4px;
|
border-bottom-right-radius: 4px;
|
border-top-right-radius: 10px;
|
height: 16px;
|
left: 4px;
|
bottom: 0;
|
position: absolute;
|
}
|
|
#response-line-0 {
|
top: 0;
|
transform-origin: 50% 0;
|
}
|
#response-line-1 {
|
bottom: 0;
|
transform-origin: 50% 100%;
|
}
|
|
&:hover {
|
#response-line-0 {
|
background-color: #fff;
|
transform-origin: 50% 0%;
|
transform: rotate(17deg) translateY(1px);
|
border-top-left-radius: 4px;
|
border-top-right-radius: 4px;
|
border-bottom-left-radius: 10px;
|
height: 16px;
|
}
|
#response-line-1 {
|
background-color: #fff;
|
transform-origin: 50% 100%;
|
transform: rotate(-17deg) translateY(-1px);
|
border-bottom-left-radius: 4px;
|
border-bottom-right-radius: 4px;
|
border-top-left-radius: 10px;
|
height: 16px;
|
}
|
#response-line-3, #response-line-4 {
|
background-color: #fff;
|
}
|
}
|
|
}
|
|
&:hover {
|
#response-line-container {
|
opacity: 1;
|
}
|
}
|
}
|
|
/* update_end author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
|
</style>
|
