SpringBoot + Spring Cloud +Vue 管理系统前端搭建（八、头部功能组件）

今天我们说一下头部一些功能，比如主题切换、国际换语言、用户信息等。

首先我们写一个主题切换的组件

一、主题切换组件

        在components目录下创建主题切换器组件ThemePicker，由于代码比较多，所以就不粘贴代码了，有需要的请私信博主。

 

引入组件

import ThemePicker from "@/components/ThemePicker"

添加切换按钮

我们可以选择图中的颜色修改主题颜色

二、语言切换组件

 

 

 

三、用户信息面板

  在Views目录下新增core目录，并在目录下新建PersonalPanel.vue,再点击用户头像时弹出用户信息面板。

在头部组件中引入，用户信息面板组件

 

 

测试效果图：

 四、系统通知面板

 在Views目录下core目录下，新建系统通知面板NoticePanel.vue,在头部组件中添加系统通知组件

在头部组件中引入：

 

 

效果图：

 

 五、用户私信面板

在Views目录下的core目录下新建MessagePanel.vue,在头部工具栏中添加用户私信组件。

在头部组件中引入

 

效果图：

 

因为代码比较多，代码我已全部上传Git,有需要的请私信博主。