一、目的
此次写作内容是在我之前发布一篇文章的基础上进行新增的。
上一篇文章:Vue + ElementUI 后台管理系统实现顶部一级菜单栏,左侧二级菜单栏_无解的菜鸟晖的博客-CSDN博客
这次要实现在页面上新增一个切换主题风格的按钮,点击后实现页面主题风格的切换功能。
二、效果图
三、具体实现步骤
1、前期准备:使用 bus 进行组件通信
在要相互通信的组件之间,引入一个新的 Vue 实例,然后分别通过调用这个实例的事件触发和监听,来实现通信和参数传递。
在 utils 文件夹下放入 bus.js 文件:
import Vue from 'vue'
const bus = new Vue() // 使用 Event Bus
export default bus
这里简单说一下 bus.js 的用法:
import bus from '@/utils/bus'
bus.$emit('message', 'hello') // 发送信息( 第一个参数为标志变量,第二个参数为通信的值 )
import bus from '@/utils/bus'
bus.$on('message', (e) => { // 接收信息( 第一个参数为标志变量,第二个参数中的e为通信的值 )
console.log(e)
})
2、前期准备:安装 sass
这里既然要有切换风格的功能,那么就会有两套及两套以上的样式,所以用 CSS 预处理器(sass),实现用哪套样式时的切换。这里采用淘宝镜像的 npm(原本的 npm 源下载 sass 很慢)。
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install node-sass --save
cnpm install sass-loader --save
npm run dev
3、在 Whole.vue 页面上( 根据需要自行安排位置即可 )添加相对应的按钮,来触发切换风格的方法。
代码如下(这里只写出这次功能实现所需的代码,无关的代码没有写出):
<!-- 切换主题 -->
<div @click="handleChangeStyle()">
<el-tooltip content="切换主题" placement="bottom">
<i :class="globalTheme ? 'el-icon-moon' : 'el-icon-sunny'"></i>
</el-tooltip>
</div>
这里使用存储对象 localStorage 来让本地浏览器存储相应的属性和属性值(如果浏览器没有清理缓存,下次进入页面会记住上次选择的样式)。
<script>
import bus from "@/utils/bus";
export default {
data(){
return{
globalTheme: false,
}
},
created() {
this.globalTheme = JSON.parse(localStorage.getItem('global_theme'));
bus.$emit('global_theme', this.globalTheme); // 将 globalTheme 的值传给父组件
},
methods:{
handleChangeStyle(){ // 切换主题
this.globalTheme = !this.globalTheme;
localStorage.setItem('global_theme', this.globalTheme); // 本地存储选择的 globalTheme
bus.$emit('global_theme', this.globalTheme); // 将 globalTheme 的值传给父组件
},
}
}
</script>
4、在整个项目的页面渲染文件 App.vue 里接收子组件通信传来的值,根据接收值的不同,对应不同的样式( 自定义为 theme1 ):
<template>
<div id="app" :class="style ? 'theme1' : ''">
<router-view></router-view>
</div>
</template>
<script>
import bus from '@/utils/bus';
export default {
data(){
return{
style: false
}
},
created(){
bus.$on('global_theme', (msg) => { // 接收子组件传来 global_theme 的值
this.style = msg;
});
}
}
</script>
整体的功能实现步骤是这样的,接下来就是设定风格切换后的样式了,这就看个人需求了,往下是我自己简单写了点切换风格后需要变化的样式。
5、编写自己想要的 CSS 样式 ,放入一个类为 theme1 的 scss 文件里,
scss 文件的具体内容如下:
.theme1{
/* 将自己想要换肤后变化的样式写入该处,根据自己的需要进行修改和添加 */
.sidebar-el-menu:not(.el-menu--collapse) {
background: #012d4b !important;
}
.sidebar > ul {
background: #012d4b !important;
}
/* 左侧菜单栏样式 */
.el-menu-item{
color: white !important; /* 默认 black */
background: #012d4b !important;
}
.el-menu-item, .el-submenu__title {
background: #012d4b !important;
}
/* 页面顶部的样式 */
.header {
/* background-image:url("../../assets/img/main-bg1-top.jpg");
background-repeat:no-repeat;
background-size:100% 200%; */
background-color: #001d30 !important;
color: white !important;
}
.el-dropdown-link {
color: white !important;
}
/* --------------- 水平一级菜单栏的样式--------------------- */
.el-menu--horizontal > .el-menu-item.is-active {
border-bottom: 2px solid #7FFFD4 !important; /* 默认 blue */
color: #7FFFD4 !important; /* 默认 blue */
}
.el-menu--horizontal > .el-menu-item {
background: transparent !important;
color: white !important; /* 默认 black */
}
.el-menu--horizontal > .el-menu-item:hover {
background: transparent !important;
color: white !important;
}
/* 消息按钮颜色样式 */
.el-icon-bell{
color: white;
}
.el-icon-caret-bottom{
color: white;
}
}
然后记得在 main.js 里引入样式文件(全局样式和主题样式文件):
import './assets/css/main.css';
import './assets/css/theme.scss';
最后把项目重跑下(npm run dev),重新打开页面,点击相关的按钮就实现了系统主题风格的切换了。
这篇文章只是提供一种思路,当然也存在不好的地方,局限在两种之间,若是要实现多种风格切换,就不能像这样简单地用布尔值和三元表达式来改变了。
这是我本人在工作学习中做的一些总结,同时也分享出来给需要的小伙伴哈 ~ 供参考学习,有什么建议也欢迎评论留言,转载请注明出处哈,感谢支持!