修改elementui 默认的菜单样式_el-menu样式修改

CSS中引入了两张自定义图片，再使用时自行添加，虽然文件命令为scss，但写法为css写法，通用。具体样式解释查看css文件的注释

Main.vue

<template>
<el-container>
	<el-header id="Header">
		<el-headbody></el-headbody>
	</el-header>
	<el-container id="content">
		<el-aside id="aside" :class='isCollapse?"m-open":"m-close"' :isCollapse="isCollapse">
			<div class="close-menu" :class='isCollapse?"m-open":"m-close"'  @click="isCollapse=!isCollapse"><el-button size="mini">折叠</el-button></div>
			<el-menu :isCollapse="isCollapse"></el-menu>
		</el-aside>
		<el-main id="main">
			<app-view></app-view>
		</el-main>
	</el-container>
</el-container>
</template>
<script type="text/javascript">
	import '@/assets/scss/left.scss'
 	import ElHeadbody from '@/components/Public/Header'
 	import ElMenu from '@/components/Public/Left'
 	import eventBus from '@/assets/js/eventBus'
 	import appView from '@/components/Public/Column'
	export default{
		components:{
			ElHeadbody,
			ElMenu,
			appView
		},
		data(){
			return{
				isCollapse:true
			}
		},
	
		
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

left.vue

<template>
	<el-menu default-active="2" :collapse="!isCollapse" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
		<el-submenu index="1">
			<template slot="title">
				<i class="el-icon-location"></i>
				<span>导航一</span>
			</template>
			<el-menu-item-group>
				<el-menu-item index="1-1">选项1</el-menu-item>
				<el-menu-item index="1-2">选项2</el-menu-item>
			</el-menu-item-group>
		</el-submenu>
		<el-menu-item index="2">
			<i class="m-icon m-icon-home"></i>
			<span slot="title">自定义图标</span>
		</el-menu-item>
		<el-menu-item index="4">
			<i class="el-icon-setting"></i>
			<span slot="title">导航四</span>
		</el-menu-item>
	</el-menu>
</template>
<script>
	export default {
		props:['isCollapse'],
		mounted() {
			this.$store.dispatch('getPermissions')
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
		},
	};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

left.css

// 设置最外层的样式，距离头部的高度 ，是否设置右边框，整个菜单的底色
#aside{
	position: absolute;
	top: 64px;
	left: 0;
	bottom: 0;
	z-index: 997;
	// border-right:2px solid #34394f;
	background:#34394f ;
}
//m-open 与 m-close 控制菜单展开与收起的宽度
#aside.m-open{
	width: 200px!important;
	transition: all 0.3s;
}
#aside.m-close{
	width: 56px!important;
	transition: all 0.3s;
}
#aside .el-menu--collapse {
    width: 56px;
}
//去掉原本带的右边框,去掉原本带的白色背景
#aside .el-menu{
	border: none;
	background:none;
	overflow: hidden;
}
//设置每个菜单的样式 高度 行高 字体大小 字体颜色等
#aside .el-menu .el-menu-item, #aside .el-menu .el-submenu .el-submenu__title{
	height: 44px;
	line-height: 40px;
	font-size: 14px;
	color: #a6a9b3;
	position: relative;
}
//设置鼠标移到菜单时的样式变化
#aside .el-menu-item:focus, 
#aside .el-menu-item:hover,
#aside .el-menu-item:hover i,
#aside .el-menu .el-submenu .el-submenu__title:hover, 
#aside .el-menu .el-submenu .el-submenu__title:hover i,
#aside .el-menu .el-submenu .el-submenu__title:focus{
	background: #24283c;
	color: #fff;
}
//鼠标移上去时增加一些样式，比如前面增加一条竖线
#aside .el-menu-item:focus:before, 
#aside .el-menu-item:hover:before,
#aside .el-menu .el-submenu .el-submenu__title:hover:before, 
#aside .el-menu .el-submenu .el-submenu__title:focus:before{
	content: "";
	position: absolute;
	border-left: 2px solid #f4bf08;
	height: 34px;
	top: 5px;
	left: 0px;
}
//设置高亮菜单的样式
#aside .el-menu-item.is-active{
	background: #24283c;
	color: #fff;
}
//设置高亮菜单增加一些样式，比如前面增加一条竖线
#aside .el-menu-item.is-active::before{
	content: "";
	position: absolute;
	border-left: 2px solid #f4bf08;
	height: 34px;
	top: 5px;
	left: 0px;
}

//自定义图标，若图标为自定义的图片，则需要先设置一个总的样式m-icon,然后给每个i设置单独样式，比如m-icon-home，并对每个图标进行设置
#aside .el-menu .m-icon {
    width: 16px;
    height: 15px;
    vertical-align: -2px;
    margin-right: 12px;
    display: inline-block;
}
// 设置默认图标
#aside .el-menu .m-icon.m-icon-home{
	background: url(../images/iconhome.png);
}
//在对应的鼠标事件 和 高亮事件中，改变对应的图标
#aside .el-menu .el-menu-item.is-active .m-icon-home, 
#aside .el-menu .el-submenu .is-active.el-submenu__title .m-icon-home, 
#aside .el-menu .el-menu-item:focus .m-icon-home, 
#aside .el-menu .el-submenu .el-submenu__title:focus .m-icon-home, 
#aside .el-menu .el-menu-item:hover .m-icon-home, 
#aside .el-menu .el-submenu .el-submenu__title:hover .m-icon-home{
	background: url(../images/iconhomes.png);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94