前端学习笔记element-Plus

西瓜_号码2025-05-27 9:49

【element-plus菜单】参数说明：

active-text-color="#ffd04b"------激活颜色

background-color="#232323"------背景颜色（29,160,176）
:default-active ="$route.path"------配置默认高亮的菜单项

text-color="#fff"
router router选项开启，el-menu-item 的 index 就是点击跳转的路径

el-menu-item 菜单项

index="/article/channel" 配置的是访问的跳转路径，配合default-active的值，实现高亮

Element PLus官方网址：Container 布局容器 | Element Plus

Element PLus官方网址：Menu 菜单 | Element Plus (element-plus.org)

导航菜单默认为垂直模式，通过将 mode 属性设置为 horizontal 来使导航菜单变更为水平模式。

复制代码

 <el-menu
          active-text-color="#ffd04b"
          background-color="#232323"
          :default-active="$route.path"
          text-color="#fff"
          router
        >
          <el-menu-item index="/article/channel">
            <el-icon><Management /></el-icon>
            <span>文章分类</span>
          </el-menu-item>
          <el-menu-item index="/article/manage">
            <el-icon><Promotion /></el-icon>
            <span>文章管理</span>
          </el-menu-item>

          <el-sub-menu index="/user">
            <!-- 多级菜单的标题 - 具名插槽 title -->
            <template #title>
              <el-icon><UserFilled /></el-icon>
              <span>个人中心</span>
            </template>

            <!-- 展开的内容 - 默认插槽 -->
            <el-menu-item index="/user/profile">
              <el-icon><User /></el-icon>
              <span>基本资料</span>
            </el-menu-item>
            <el-menu-item index="/user/avatar">
              <el-icon><Crop /></el-icon>
              <span>更换头像</span>
            </el-menu-item>
            <el-menu-item index="/user/password">
              <el-icon><EditPen /></el-icon>
              <span>重置密码</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>