BuildAdmin19：如何使用el-popover弹出框，实现个人资料页面
原创BuildAdmin19：如何使用el-popover弹出框，实现个人资料页面
原创
前言
作为从拆解实现buildadmin入手学习前端系列的第19篇，buildadmin的框架建设部分已经接近了尾声，导航菜单栏作为框架的最后一部分，在之前实现了全屏、回到首页以及上一篇暗黑模式的切换。
导航菜单栏最后剩下两个功能需要实现：个人资料和系统设置。本篇文章文章主要实现个人资料部分，主要包括个人头像以及资料框的实现。
设计
如图，当前实现的导航菜单栏只有admin用户名，没有头像。
参照Buildadmin的实现，在点击头像用户名区域时，还会有个弹出框显示一些信息。
头像框实现
上面我其实是用了img标签实现了头像框，但是最终没有显示。我分析了一下原因，就是头像和名称是一个整体，div的宽度和其他导航按钮一样，我设置成了一个固定值，导致没有空间显示img，所以被隐藏了。
页面设计
所以我这里索性就使用Element Plus的头像组件el-avatar来实现。其次就是点击头像会有一个弹出框，这里使用el-popover弹出框组件实现。
<template>
<el-popover
:width="240"
popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px; margin-top: 10px"
placement="bottom-end"
>
<template #reference>
<div class="admin_info">
<el-avatar size="small" src="/@/assets/logo.png"/>
<div class="admin-name">{{ name }}</div>
</div>
</template>
<template #default>
<div class="popover-content">
<el-avatar
:size="70"
src="/@/assets/logo.png"
style="margin-bottom: 8px"
/>
<div class="popover-content-item">
<p>{{ name }}</p>
</div>
<div class="popover-content-item">
<p>{{ formattedDate }}</p>
</div>
<div class="popover-content-item admin-button">
<el-button plain type="primary">个人资料</el-button>
<el-button plain type="danger">退出</el-button>
</div>
</div>
</template>
</el-popover>
</template>在上面的网页设计中，看起来比较复杂，但实际上都是el-popover官网的使用方法，我们只需要填鸭式操作即可。
在el-popover弹出框中，首先要与el-avatar组件实现的头像框绑定，然后定义弹出框的内容。使用el-popover预留的slot插槽即可实现。reference插槽用来绑定触发组件，所以将el-avatar组件定义在此插槽中，size属性控制头像的大小。
default插槽定义的就是弹出框内容，这里主要分为三个部分，从上而下是头像、名称、时间和两个功能按钮。功能按钮是用primary和danger两个类型的el-button实现的。
js实现
在js部分，首先是对用户名定义，这些后面都可以从后端中通过api获取。时间YMD格式使用原始的Date实现比较麻烦，所以这里使用了moment.js，使用前npm安装即可。
import moment from 'moment';
const formattedDate = moment().format('YYYY-MM-DD HH:mm:ss');
const name = 'admin'css样式
对上面的各个部分进行css样式定义，首先是头像框部分，在默认的div空间内，头像和名称是上下分布的。
所以为了让其水平分布，这里使用flex弹性布局，使用 flex-direction 属性控制分布方向，这里row指的就是行分布。
.admin-name {
margin-left: 5px;
}
.admin_info {
display: flex;
flex-direction: row;
align-items: center;
}接着就是el-popover弹出框内容部分的样式设计，整体元素是从上到下分布，被包裹在 popover-content 这个div中，所以还是使用flex弹性布局列（column）分布，而两个按钮是左右分布，所以使用flex弹性布局的行（row）分布。
.popover-content {
display: flex;
flex-direction: column;
align-items: center;
& .admin-button {
display: flex;
flex-direction: row;
padding: 13px;
}
& .popover-content-item {
margin-top: 12px;
}
}最后就是使用margin来个控制元素之间的距离，使用width属性控制弹出框的宽度，在样式实现之后效果如下.
其实这里要说明一下关于el-popover弹出框样式，弹出框的样式需要在定义html时，使用el-popover的 popper-style 属性定义，使用margin-top来控制导航菜单栏的间距。
同时placement属性要设置为bottom-end，这样箭头才能靠右，如果没有这些设置，样式如下。
个人资料
在点击个人资料页面之后，会打开一个tab页，其实这就是一个路由的实现。对于BuildAdmin的路由信息，大多都是从后台json请求返回的，在控制台中可以看到个人资料页的component页面路径。
路由信息
因为我这里还没有后台，所以路由信息的json都是写死在了代码中，至于后面动态渲染路由，就和BuildAdmin是一样的流程，在之前的BuildAdmin05：如何玩转Vue路由动态加载有提到。在这里我将个人资料这个页面的路由新增到json中。
个人资料作为常规管理的菜单，在经过路由动态加载之后，会被渲染到菜单栏中。同时根据component对应的路径，我们定义adminInfo.vue页面，这个页面当前未实现网页内容，只有个人资料四个文字。
路由跳转
最后对个人资料按钮绑定点击路由跳转事件。
<el-button plain type="primary" @click="router.push('/admin/routine/adminInfo')">个人资料</el-button>router是vue-router中的useRouter对象，直接push跳转到个人资料页面即可。
如图，点击菜单栏和按钮的个人资料，都会跳转到对应的tab标签页。
结语
本篇文章主要实现了头像框和个人资料的一个路由跳转，大部分是对Element Plush组件的应用。对于头像部分，可以使用v-bind绑定src，让用户上传头像到服务器，实现自定义头像。其中路由部分，包括路由动态加载和tab的跳转，如果想要了解这一部分的实现，需要参考之前的文章。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
