vue3.0后台管理项目（day3）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第9天，点击查看活动详情

上一篇文章我们进行页面的创建，删除不必要的页面和Element-plus的引入，接下来将开发我们的头部CommonHeader.vue组件

• 该组件的基础样式如下图所示：

第一个按钮可以使Aside组件的显示与隐藏，第二个按钮可以跳转到首页，然后就是头像，头像这里点击可以弹出下拉框，展示个人中心以及退出登录两个选项，如下图所示：

• 首先第一个按钮，我们使用el-button里面嵌套el-icon图标来实现，并绑定一个点击事件来使Aside的展示与隐藏，具体的代码如下所示：

<div class="button">
        <el-button plain  size="small" @click="handleCollapse">
            <el-icon><Menu /></el-icon>
        </el-button>
       <el-button size="small" @click="toHome()">首页</el-button>
    </div>

• 第二个按钮同理，里面展示首页文章并绑定页面跳转事件，代码如上所示
• 然后是后台管理系统这个标题，h3标题展示就行了
• 然后是头像和下拉菜单的实现，这里我们引入图片，在这个图片绑定一个展示下拉菜单的事件，具体的代码如下所示：

 <el-dropdown>
        <span class="el-dropdown-link">
        <img src="../assets/images/user.png" alt="">
    </span>
        <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="toCenter">个人中心</el-dropdown-item>
        <el-dropdown-item @click="toLogin">退出</el-dropdown-item>
      </el-dropdown-menu>
    </template>
</el-dropdown>

然后这几个元素使用flex布局，并且使用 justify-content: space-between;使这三个元素均匀排布到我们的头部组件中，header的背景颜色设置为#1d262e，然后头像设置圆角，这样我们的header组件的基础样式就完成了，接下来是它的一些功能的实现