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
}
},
}
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>
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);
}