vue项目--后台管理系统（day5）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情

上一篇文字里我们完成了首页按钮的设置，接下来我们将完成面包屑的功能以及点击用户头像下拉出现个人中心和退出登录的样式。

1. 面包屑，他的功能就是显示当前页面的路径，快速返回之前的任意页面。我们找到组件库的代码：element.eleme.cn/#/zh-CN/com… ，然后复制粘贴到我们的commonHeader.vue文件中的button按钮下面，具体的代码如下所示：

<el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="item in tags" :key="item.path" :to="{ path: item.path }">{{item.label}}</el-breadcrumb-item>
      </el-breadcrumb>

这里的v-for循环的tags 标签是后面通过computed计算属性从state里获取到的数据，并且我们还为他添加了path路径，可以让用户点击那个页面的标题就跳转到相应的页面。具体的页面效果如下图所示：

2. 接下来就是用户头像的实现，这个其实是个Dropdown下拉菜单组件，具体的链接地址如：element.eleme.cn/#/zh-CN/com… ，然后我们使用他的具体代码如下：

<div class="r-content">
      <el-dropdown trigger="click" size="mini">
        <span>
          <img class="user" :src="userImg" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item>退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

图片就是一个用户的头像，可以在网上找，然后引入进去，这个trigger就是触发下拉的行为，有hover鼠标经过触发下拉行为，有click鼠标点击触发下拉行为，这里我们使用的是click点击显示下拉内容。

到这里，我们的Header头部组件就完成了，内容比较少。