vue3+elementplus+ts搭建权限管理系统--4

*****************此文仅用于个人记录学习vite创建vue3项目过程，请勿转载或转发******************

一、展示个人信息

展示个人信息需要实现的功能：

1. 未登录时不显示消息图标和个人信息，需要显示“登录”按钮，但是登录页面不显示“登录”按钮
2. 如果有未读消息，则消息图标需要显示未读红点标识
3. 个人信息下拉菜单：

•  个人中心：跳转至个人中心基本资料页面
• 退出：实现退出系统

功能1：未登录时不显示消息图标和个人信息，需要显示“登录”按钮，但是登录页面不显示“登录”按钮

该功能需要根据登录状态判断是否已登录，登录状态下的用户信息取自登录页面输入的用户名，假设这个登录状态标识名为isLogin,用户信息名为username,由于登录页面相关功能还未实现，因此暂时使用变量方式简单做一个初始化，修改通用头部信息如下：

展示页面信息如下：

同时需要加入中英文转换

如果是手动修改isLogin的值，则修改脚本如下

页面展示效果如下：

功能2：如果有未读消息，则消息图标需要显示未读红点标识

该功能需要获取是否有未读消息，通常的做法是向后台发送获取用户基本信息的请求，然后根据用户未读消息数判断是否显示未读红点，暂时用变量实现，后续请求封装完成后再完善这个功能

前端显示未读红点可以使用Element的徽章组件el-badge，这个组件可以显示消息状态，也可以显示消息数量，而我们的需求只需要显示消息状态即可，所以先使用一个变量模拟未读数量

修改PageHeader.vue代码如下

使用变量unReadCount来模拟用户未读消息的数量，初始值为0，并在模板中使用该变量，设置el-badge的is-dot属性为该值转换的Boolean值，是否显示未读红点由unReadCount的值控制，如果该值为0，则转换后为假，不显示红点，否则将显示红点。

查看页面无变化

修改这个变量的值为非0的值

页面展示有红点

功能3：个人信息下拉菜单

   个人信息下拉菜单使用Elementplus的el-dropdown下拉菜单组件，下拉菜单的单击事件使用该组件的command属性，设置单击菜单项出发的事件回调，同时通过dropdown插槽设置下拉菜单el-dropdown-menu组件，在该组件的子组件el-dropdown-item上设置command指令，这些指令将传入对应的el-dropdown组件的command事件回调中

页面效果如下

点击下拉菜单个人中心，展示个人中心页面

点击退出，console打印退出俩字