在使用 elementplus 的菜单组件时,我发现有很多东西是官方没有提到但是需要注意的点
- 菜单组件右侧会有一个边框
设置css
css
.el-menu {
border: 0 !important;
}
- 使用其他的 icon
文字内容一定要写在 这个名字为 title 的插槽中
html
<el-menu-item
v-for="item in navList"
:key="item"
:index="
item.path
"
>
<span
style="margin-right: 20px; font-weight: bold"
:class="item.icon"
></span>//这个地方我使用的是 阿里巴巴图标库里面的图表
<template #title>
{{ item.text }}//文字要在这里面
</template>
</el-menu-item>
- 刷新不能回到对应的 活动样式失效
我这边使用的是 :class 加 设置 :default-active
先是在 el-menu-item 中指定了 选中时的样式
html
<el-menu-item
:class="{subActive:getCurrentPath()==item.path}"//这行代码待会会解释
v-for="item in navList"
:key="item"
:index="
item.path
"
>
<span
style="margin-right: 20px; font-weight: bold"
:class="item.icon"
></span>
<template #title>
{{ item.text }}
</template>
</el-menu-item>
通过 getCurrentPath 这个函数获取到 当前的路径 ,并且 判断是否和当前的路径符合,来控制样式是否显示。
我这边的 getCurrentPath 这个函数里面 是因为 前面前缀是一样的,我只需要判断后面是否相等就行,之所以会这样写 是因为很多时候 我们左侧的路由 因为右边的内容页,再细分,但是呢,它是同属于一个大的路由的,它们会有一个公共的前缀部分,只需要保证公共前缀部分相等就行
javascript
const getCurrentPath = () => {
let currentPath = route.path.split("/");
// console.log(currentPath);
for (let i = 0; i < navList.length; i++) {
let path = navList[i].path.split("/");
if (flag === 0) {
if (path[2] == currentPath[2]) {
return navList[i].path;
}
}
else{
if (path[1] === currentPath[3]) {
return navList[i].path;
}
}
}
};
一般情况应该是这样,插一嘴,route 指的是 这个
javascript
import { useRoute } from "vue-router";
const route = useRoute();
javascript
const getCurrentPath = () => {
for (let i = 0; i < navList.length; i++) {
if(navList[i].path===route.path) return navlist[i].path
//其实就是判断 菜单的路由是否对的上当前路径
}
};
然后 在 el-menu 中 需要设置 router 模式,也就是需要加上这个,设置默认路由 是 getCurrentPath()就好(一定需要匹配的上 :index 里面的内容)
javascript
<el-menu
class="el-menu-vertical-demo"
:collapse="isCollapse"
router
:default-active="getCurrentPath()"
>
</el-menu>
- 修改高度等
element-plus 中很多样式都是设置了一个固定的值来设定css的一些参数,当我们需要修改这些的时候,我们发现使用 css 覆盖的效果微乎其微,其实我们可以自己修改这些值
很多都可以去检查里面找到,然后进行修改
css
:root {
--el-menu-item-height: 80px;//这个是每个子菜单高度
--el-menu-base-level-padding: 40px;//padding值
--el-text-color-primary: #8a8989;//文字颜色
}