vue3后台管理框架geeker admin -- 消息通知0 环境 Node.js 16.x+ pnpm 7.x+ G

0 环境

• Node.js 16.x+
• pnpm 7.x+
• Git

1 参考文档

geeker admin官方文档

element-plus官方文档

vue router官方文档

useUserStore

Popover 气泡卡片

Badge 徽章

tabs-标签页

2 前言

先看下图，它是之后要分析的界面。

对应的代码在src/layouts/components/Header/components/Message.vue，之后我会直接用index.vue来替代它。看如下图的代码：这里用到了el-popover、el-badge和el-tabs(对应的文档看上面的参考文档)。结合上面的界面，在铃铛右边上角有个数字就是这个el-badge，el-popover就是展开，点开后可以点击通知、消息、代办切换(这里用到的就是el-tabs)。

3 代码逻辑

先看下图代码: 给el-popover设置了placement出现位置为底部，宽度为310，触发方式为点击。在往下是el-badge包裹这个i标签，这里的i标签就是那个铃铛图标，我们聚焦el-badge的:value，当然它这里是写死的，它就是显示铃铛右上角的数字。

首先我们看下图的这两张图，它只是定义了，触发了el-popover，默认显示通知。这里activeName默认是first，它对应的是el-tab-pane里的name。

4 代码样式

下面我们分析如下图的样式。

1 有消息时的样式

最外层div .message-list包裹所有消息，再往下的每个div .message-item包裹每条消息，它里面的布局是左边是图片，右边是内容，内容又分为上下，上面是具体信息，下面是消息的时间。

.message-list最外层的那个div，第81-82行的它的目的是每条消息上下排列。再看.message-item做了啥，先看83-90行，flex布局，然后交叉轴居中，这里padding上下有填充，有空白，看着舒服，底部加了一个边框线做区分，最后一条消息下无需再加border了，&:last-child border直接设为none。再看img，就是91-95行，设置img的宽高以及间距。再看.message-content就是96行到最后了，内容布局也是上下排布的(97-98行)，.message-title与下面的日期加了个边距，.message-date字体调小，设置一下颜色。

2 无消息时的样式

如下图，无消息内容时，就是一个div包裹着img+文字提示。

样式就比较少了，上下布局，水平交叉轴都要居中，设置高度和行高，这里是为了稍微往上一点看着舒服点。

5 小结

主要是css样式的调整，其他的没啥。