作为从拆解实现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部分,首先是对用户名定义,这些后面都可以从后端中通过api获取。时间YMD格式使用原始的Date实现比较麻烦,所以这里使用了moment.js,使用前npm安装即可。
import moment from 'moment';
const formattedDate = moment().format('YYYY-MM-DD HH:mm:ss');
const name = 'admin'
对上面的各个部分进行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 删除。