|
1
2
3
4
5
6
7
|
<template>
<a-layout-sider
:class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
width="208px"
:collapsible="collapsible"
v-model="collapsed"
:trigger="null">
|
|
8
|
<logo/>
|
|
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<s-menu
:collapsed="collapsed"
:menu="menus"
:theme="theme"
@select="onSelect"
@updateMenuTitle="onUpdateMenuTitle"
:mode="mode"
:style="smenuStyle">
</s-menu>
</a-layout-sider>
</template>
<script>
|
|
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
import ALayoutSider from 'ant-design-vue/es/layout/Sider'
import Logo from '../tools/Logo'
import SMenu from './index'
import {mixin, mixinDevice} from '@/utils/mixin.js'
export default {
name: "SideMenu",
components: {ALayoutSider, Logo, SMenu},
mixins: [mixin, mixinDevice],
props: {
mode: {
type: String,
required: false,
default: 'inline'
|
|
37
|
},
|
|
38
39
40
41
42
43
44
45
46
|
theme: {
type: String,
required: false,
default: 'dark'
},
collapsible: {
type: Boolean,
required: false,
default: false
|
|
47
|
},
|
|
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
collapsed: {
type: Boolean,
required: false,
default: false
},
menus: {
type: Array,
required: true
}
},
computed: {
smenuStyle() {
let style = {'padding': '0'}
if (this.fixSiderbar) {
style['height'] = 'calc(100% - 59px)'
style['overflow'] = 'auto'
style['overflow-x'] = 'hidden'
|
|
65
|
}
|
|
66
67
68
69
70
71
72
73
74
|
return style
}
},
methods: {
onSelect(obj) {
this.$emit('menuSelect', obj)
},
onUpdateMenuTitle(obj) {
this.$emit('updateMenuTitle', obj)
|
|
75
76
|
}
}
|
|
77
|
}
|
|
78
79
80
|
</script>
<style lang="less" scoped>
|
|
81
82
83
|
/* update_begin author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
.sider {
@scrollBarSize: 10px;
|
|
84
|
|
|
85
|
ul.ant-menu {
|
|
86
|
|
|
87
|
/* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
|
|
88
|
|
|
89
90
91
92
93
94
|
&::-webkit-scrollbar {
width: @scrollBarSize;
height: @scrollBarSize;
background-color: transparent;
display: none;
}
|
|
95
|
|
|
96
97
98
|
& .-o-scrollbar {
display: none;
}
|
|
99
|
|
|
100
101
102
103
104
105
106
107
108
|
/* 兼容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%);
|
|
109
|
|
|
110
|
/* 定义滚动条轨道 */
|
|
111
|
|
|
112
113
|
&::-webkit-scrollbar-track {
background-color: transparent;
|
|
114
115
|
}
|
|
116
|
/* 定义滑块 */
|
|
117
|
|
|
118
119
120
121
122
123
124
125
|
&::-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;
}
|
|
126
|
|
|
127
128
|
&:active {
background-color: #bbbbbb;
|
|
129
130
|
}
}
|
|
131
132
133
134
135
136
137
138
139
140
141
|
}
/** 暗色系滚动条样式 */
&.dark ul.ant-menu {
&::-webkit-scrollbar-thumb {
background-color: #666666;
&:hover {
background-color: #808080;
}
|
|
142
|
|
|
143
144
145
146
|
&:active {
background-color: #999999;
}
}
|
|
147
148
|
}
|
|
149
150
151
|
}
/* update_end author:sunjianlei date:20190509 for: 修改侧边导航栏滚动条的样式 */
|
|
152
153
154
155
|
</style>
<!-- update_begin author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
<style lang="less">
|
|
156
157
158
159
160
161
162
163
|
// 选中首页的时候不显示背景颜色,只应用于左侧菜单
.sider .ant-menu.ant-menu-root {
& > .ant-menu-item:first-child {
background-color: transparent;
& > a, & > a:hover {
color: rgba(0, 0, 0, 0.65);
}
|
|
164
|
|
|
165
|
&.ant-menu-item-selected {
|
|
166
|
& > a, & > a:hover {
|
|
167
|
color: @primary-color;
|
|
168
|
}
|
|
169
170
|
}
}
|
|
171
|
|
|
172
173
174
|
&.ant-menu-dark > .ant-menu-item:first-child {
& > a, & > a:hover {
color: rgba(255, 255, 255, 0.65);
|
|
175
176
|
}
|
|
177
|
&.ant-menu-item-selected {
|
|
178
|
& > a, & > a:hover {
|
|
179
|
color: rgba(255, 255, 255, 1);
|
|
180
181
182
|
}
}
}
|
|
183
|
}
|
|
184
185
|
</style>
<!-- update_end author:sunjianlei date:20190530 for: 选中首页的时候不显示背景颜色 -->
|