Element Plus Menu二级菜单的样式修改 el-popper

最新推荐文章于 2025-04-22 17:40:31 发布

香芋味的可可

最新推荐文章于 2025-04-22 17:40:31 发布

阅读量5.9k

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_51467172/article/details/133175807

版权

博客主要围绕Vue中el-menu样式修改展开，介绍了el-menu原始样式与修改后的样式，重点给出代码实现。包括在el-sub-menu标签下使用自带属性popper-class写入自定义类修改样式，且该自定义类需写在App.vue中才能获取到，还提及了样式代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-menu原始样式：

修改后：

代码实现：

页面代码（element文档中的例子代码进行修改后的）：

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item index="1">菜单</el-menu-item>
    <el-sub-menu index="2" popper-class="test">
      <template #title>我的</template>
      <el-menu-item index="2-1">登录</el-menu-item>
      <el-menu-item index="2-2">注册</el-menu-item>
      <el-menu-item index="2-3">修改个人信息</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="3" disabled>联系我们</el-menu-item>
    <el-menu-item index="4">其他</el-menu-item>
  </el-menu>
  <div class="h-6" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

1、要在el-sub-menu标签下，写入自带属性popper-class=""，写入自定义类修改样式。

2、popper-class的自定义类需要写在App.vue中才能获取到

样式代码：

.test {
  border: none !important;
  .el-menu {
    // 修改二级菜单整个背景颜色
    background-color:lightsteelblue;
    // 二级菜单中的子选项
    .el-menu-item {
      background-color: transparent !important;
      color: #fff !important;
      font-weight: 400;
      width: 100%;
      font-size: 14px;
      text-align: center;
      // 被选择的子选项
      &:not(.is-disabled):hover {
        color: rgb(226, 195, 237) !important;
        background-color: #7d85ca !important;
        width: 100%;
        text-align: center;
      }
    }
  }
  // 弹出的二级菜单
  .el-menu--popup {
    min-width: 6.5rem !important;
    min-height: 7rem !important;
  }
}