前端学习笔记element-Plus

【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>