Element-ui 中的 下拉菜单 和 下拉菜单

Element-ui 中的 下拉菜单 和 下拉菜单

<div class="header">
      <div class="logo">
        <img src="../../../assets/layout/logo.png" alt="">
      </div>
      <!--
          判断 fullPath 中是否包含某个参数，来决定是否加上某个类名
          究竟什么样的是二级菜单？
          el-menu -> el-submenu -> el-menu-item
          整体        标题          具体菜单
          如下的是一级菜单：
          el-menu -> el-menu-item
          代码中的 activeTitle 用的还是很好的
          el-dropdown 下面的第一个标签才会触发，所以用 div 标签包起来了
       -->
      <div class="nav">
        <el-menu class="el-menu-demo navBar" :class="$route.fullPath.includes('/home') ? 'home' : 'other'" mode="horizontal" router>
          <el-menu-item v-for="(item, index) in menuList" :title="item.name" :key="index" :index="item.path">
            <div :title="item.name" :class="{activeTitle: activePath === item.path}" ref="title">{{ item.name }}</div>
          </el-menu-item>
        </el-menu>
        <el-dropdown @command="handleCommand" v-if="isLogin">
          <div>
            <img src="@/assets/layout/avatar.png" width="40" alt="">
            <span class="username">{{userData.nickname}}</span>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="1">修改密码</el-dropdown-item>
            <el-dropdown-item :command="2">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="login-text" @click="loginDialogVisible = true" v-else>登录</div>
      </div>
    </div>

记笔记是个好习惯，没有人能记一辈子

多年以后想用了，还能看

把项目分成碎片化的功能点这样好查找一点，为了看某个小功能而去看整个项目就有点舍本逐末了