vue 一键换肤

本文主要是介绍vue 一键换肤，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

思路，可以运用element 内的组件配合css样式
操作：页面中只需要添加一键换肤的操作时间进行配色即可。一般就是两种颜色，默认色和改变色，我的需求是改背景色，不改字体色，因为字体的色值颜色太多。我用了本地存储localStorage加store。

如果需要透明度，注意的是要给所有的组件背景色初始值 透明度 background: rgba(255, 255, 255, 0.05)， 这个设置一般是在全局的css样式李设置，具体就要自己去元素李点击查看了;
不需要可以忽略。

 <el-button type="info" plain @click="changeSkin">一键换肤</el-button>定义一个初始色data () {return {themeColor: '#061729'}},然后时间中进行更改存值即可changeSkin () {if (this.themeColor === '#061729') {this.themeColor = '#031E3C' // 切换到新主题this.$store.commit('setThemeBackgroundColor', this.themeColor)} else {this.themeColor = '#061729' // 切换到原主题this.$store.commit('setThemeBackgroundColor', this.themeColor)}window.localStorage.setItem('theme', this.themeColor) // 保存当前主题色到localStorage// this.visible = !this.visible
},

在需要的页面进行计算属性

  computed: {currentComponentBackgroundColor () {return this.themeColor}},

页面渲染

<div class="header-container" :style="{background: currentComponentBackgroundColor}"></div>

在store 中存储

const state = {themeBackgroundColor:  window.localStorage.getItem('theme') // '#061729' // 默认主背景色
}const mutations = {setThemeBackgroundColor (state, color) {state.themeBackgroundColor = color}
}
即可。

这篇关于vue 一键换肤的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---