踩坑:
看到网上一个办法是在static中写好不同的样式文件。当按钮点击切换的时候,调用方法,去动态加载css文件。
export function getTheme(themeId){
return require("../../static/css/theme/" + themeId + "/index.scss");
}
但是!这样切换的时候,后面的样式会覆盖前面的样式!皮肤切换不回来了!
进入正题:
步骤一、写样式。
在styles文件夹中添加theme.scss,在里面写好不同的主题风格。我这边是.lightMode和.darkMode
步骤二、引入theme.scss (也可以直接将theme.scss引入到main.js)
@import './theme.scss'; //引入到index.scss这个全局样式中
import '@/styles/index.scss' // 在main.js中引入index.scss全局样式
步骤三、layout页面
最外层包裹上样式,获取子组件按钮切换的值的回传
用computed监听themeObj,通过themeObj中的isNightFlag动态获取样式。
methods中,写上changeTheme方法,通过子组件中的切换按钮传回来的isNight,去更改isNightFlag的数值。写入cookies,防止每次刷新的时候皮肤恢复成默认样式。
created中,每次重新加载页面的时候,通过cookies去判断当前已经选择的皮肤主题。
步骤四、子组件页面
子组件传递给父组件当前的皮肤选择,并且要注意当刷新之后的switch的皮肤选择状态(要从cookie中获取)。
<el-switch
v-model="isNightTheme"
active-text="夜间模式"
active-color="#1062b5"
inactive-color="#a0cbf6"
@change="changeTheme">
</el-switch>
data (){
return{
isNightTheme:false
}
},
created(){
//获取switch的当前状态
Cookies.get('modeStatus') == 1 ? this.isNightTheme = true : this.isNightTheme = false
},
methods:{
changeTheme(){
this.$emit('themeClick',this.isNightTheme);
},
}