参考资料:
设置高亮的样式写法是这样写的:
![](https://img-blog.csdnimg.cn/direct/e0c7bde6e6834769b2812f879805d24e.gif)
<template>
<div>
<el-container>
<el-aside style="width: 200px;min-height: 100vh;background-color:#001529">
<div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center;">
logo
</div>
<el-menu style="border:none" background-color="#001529" text-color="rgba(255,255,255,0.65)"
default-active="$router.path">
<el-menu-item index="/">
<template #title>
<el-icon>
<House />
</el-icon>
<span>系统首页</span>
</template>
</el-menu-item>
<el-menu-item>系统首页</el-menu-item>
<el-menu-item>系统首页</el-menu-item>
<el-sub-menu index="1-4">
<template #title>
<el-icon>
<Menu />
</el-icon>
<span>信息管理</span>
</template>
<el-menu-item index="1-4-1">用户信息</el-menu-item>
</el-sub-menu>
</el-menu>
</el-aside>
</el-container>
</div>
</template>
<style scoped>
.el-menu--inline .el-menu-item {
background-color: #000c17 !important;
}
</style>
如何设置高亮效果
![](https://img-blog.csdnimg.cn/direct/43bda35c7b9a4eb28e0bab4b830f3021.gif)
样式写成这样就行
.el-menu-item:hover {
color: #fff;
}
如果二级标题和图标也想要发生改变,添加这段代码就行了
.el-menu-item:hover,
.el-sub-menu__title:hover span {
color: #fff !important;
}
.el-sub-menu__title:hover i {
color: #fff !important;
}
![](https://img-blog.csdnimg.cn/direct/31175ba250fe42339054b78310684887.gif)
如果二级标题想要点击之后改变颜色,填这种样式就好了
.el-menu-item.is-active {
background-color: #40a9ff !important;
color: #fff;
border-radius: 5px !important;
}
![](https://img-blog.csdnimg.cn/direct/6e47ee9d761b4641a232af075d3622ca.gif)
如果要修正长度
![](https://img-blog.csdnimg.cn/direct/8480c0cec7624ba698123e70f373747c.png)
用这个代码就行
.el-menu-item {
height: 40px !important;
line-height: 40px !important;
}
.el-submenu__title {
height: 40px !important;
line-height: 40px !important;
}
![](https://img-blog.csdnimg.cn/direct/1903a77b1f104fd6a78a1c5b7c7b1324.png)
如果出现不对齐的情况
![](https://img-blog.csdnimg.cn/direct/bd19a4fbe6304e0a822ce3819edba12d.png)
设置图标位置,点击三角符号
![](https://img-blog.csdnimg.cn/direct/4bd6f2c2a6aa4a86a5ce0e870ee82354.png)
![](https://img-blog.csdnimg.cn/direct/e87f9e09901a4420a79f13d6311d4b5d.png)
折叠水平菜单,用collapse
![](https://img-blog.csdnimg.cn/direct/67033549abcd495fb0c797b1ea113b97.png)
在el-menu中添加isCollapse,同时在data中定义字符串
![](https://img-blog.csdnimg.cn/direct/13b5b6f5ed5c4e9eb2f07a1049d903b4.png)
这里:collapse=xxx要设置,data中也要设置
<el-menu :collapse="isCollapse" style="border:none" background-color="#001529"
text-color="rgba(255,255,255,0.65)" default-active="$router.path">
</el-menu>
<script lang="ts">
export default {
name: 'HomeView',
data() {
return {
isCollapse: true
}
}
}
</script>
写成这样就出现了折叠效果的初步形状了
![](https://img-blog.csdnimg.cn/direct/2fa177272fad422ba04e6f0b7b2fd6fa.gif)
这里width不能写死,在el-aside中添加 :width="asideWidth"
<el-aside :width="asideWidth" style="min-height: 100vh;background-color:#001529">
<script lang="ts">
export default {
name: 'HomeView',
data() {
return {
isCollapse: true,
asideWidth: '200px'
}
}
}
</script>
![](https://img-blog.csdnimg.cn/direct/6f0aa064469546d8849ddc1319d05a4a.png)
这里要在头部添加一个标签
![](https://img-blog.csdnimg.cn/direct/04556d764f494b38bb282b0071a9b158.png)
头部要有一个icon
![](https://img-blog.csdnimg.cn/direct/933a56e3f188444dbc74b8633125af27.png)
绑定事件,@click="handleCollapse"
![](https://img-blog.csdnimg.cn/direct/03be44b8bcef4340b73b581bc067f445.png)
改成
.el-aside {
transition:width .3s;
}
![](https://img-blog.csdnimg.cn/direct/7b2aa129a57f44a2bf0c2f5a3d1c2114.png)
.el-aside {
transition: width .30s;
}
伸缩图标如何做,这里图标消失不见了,该怎样设置
![](https://img-blog.csdnimg.cn/direct/77396593536f48e78c5dfb8cbbe6ab5d.png)
![](https://img-blog.csdnimg.cn/direct/83c560a392064c09af868638d87296eb.png)
写成这样就行了
<el-menu-item index="/">
<el-icon>
<House />
</el-icon>
<span>系统首页</span>
</el-menu-item>
效果
![](https://img-blog.csdnimg.cn/direct/40481d9304524da0a7774484b47aacde.gif)
添加阴影
在.el-aside和.el-header中添加![](https://img-blog.csdnimg.cn/direct/7cabc84284df42649019f8d2a5c2fc6f.png)
如何添加logo,可以利用行内样式直接填,再结合F12,设置宽度
<div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center;">
<img src="@/assets/logo.png" style="width: 40px;height: 40px;">
</div>