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

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

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

一、主题切换组件

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

引入组件

import ThemePicker from "@/components/ThemePicker"

添加切换按钮

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

二、语言切换组件

 

 

三、用户信息面板

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

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

 

测试效果图:

 四、系统通知面板

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

在头部组件中引入:

 

效果图:

 

 五、用户私信面板

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

在头部组件中引入

 

效果图:

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

猜你喜欢

转载自blog.csdn.net/JavaLLU/article/details/118640171
今日推荐