elementplus菜单组件的那些事

在使用 elementplus 的菜单组件时,我发现有很多东西是官方没有提到但是需要注意的点

  1. 菜单组件右侧会有一个边框

设置css

css 复制代码
.el-menu {
  border: 0 !important;
}
  1. 使用其他的 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>
  1. 刷新不能回到对应的 活动样式失效

我这边使用的是 :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>
  1. 修改高度等

element-plus 中很多样式都是设置了一个固定的值来设定css的一些参数,当我们需要修改这些的时候,我们发现使用 css 覆盖的效果微乎其微,其实我们可以自己修改这些值

很多都可以去检查里面找到,然后进行修改

css 复制代码
:root {
  --el-menu-item-height: 80px;//这个是每个子菜单高度
  --el-menu-base-level-padding: 40px;//padding值
  --el-text-color-primary: #8a8989;//文字颜色
}
相关推荐
开心工作室_kaic2 分钟前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā2 分钟前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年1 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder1 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727572 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart2 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
会发光的猪。2 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客2 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记3 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安3 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js