Vue项目如何实现切换主题色思路
更新时间：2023年01月13日 14:15:48 作者：zongmaomx
这篇文章主要介绍了Vue项目如何实现切换主题色思路，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue项目切换主题色思路
需求
用户通过取色器选择自己喜欢的颜色，替换项目中的主题色
实现效果
实现思路
在项目中使用的是less，使用@themeColor定义了主题色，便想着尝试用js修改less的变量即可，但查询了一下只知道有less.modifyVars方法可以修改，但没有详细的说明，顺便查到了可以修改js可以修改原生css的变量，而且简单易懂，便尝试使用css来定义主题色并设置修改。
首先在App.vue中设置主题色：
<style lang="less">
#app {
--themeColor:#008cff;
}
</style>和使用less并不冲突，使用--定义变量有自己的作用域，所以最好在根目录定义，这里我选择App.vue的#app父容器中定义。
定义好之后怎么使用呢，只需要在子组件的style中使用var(--themeColor)即可使用。
<style lang="less">
.z-header-container {
width: 100%;
height: 66px;
//background: #fff;
text-align: center;
background: var(--themeColor);
}
</style>
接下来便是怎么让用户能够来修改这个主题色，首先想到这是一个全局的变量，在vue中管理全局变量自然是使用vuex
在store文件中定义好themeColor变量，以及修改它的方法changeThemeColor。
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
themeColor: "#008cff"
},
mutations:{
changeThemeColor(state,val){
state.themeColor = val;
}
}
})
export default store;在main.js中引入store
然后在头部组件中使用elementUI的颜色选择器，当用户修改颜色时，提交修改，修改state中的主题色
然后在App.vue中监听state中主题色的改变。
要是改变了，也就改变对应css的主题色变量：
首先用computed计算属性得到themeColor的值，然后使用watch监听，改变的话使用.setProperty方法修改。
最终达到效果。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue项目中使用rem,在入口文件添加内容操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要给大家介绍了关于Vue-Router的相关资料,vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,本文通过示例代码介绍的非常详细,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了vue中关于this.refs为空出现原因及分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
本篇文章主要介绍了Vue-Router模式和钩子的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
今天小编就为大家分享一篇vue 实现单选框设置默认选中值，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家详细介绍了vue增删改查的简单操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了Vue如何导出页面为word格式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue 中使用lodash对事件进行防抖和节流操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
今天小编就为大家分享一篇vue 解决移动端弹出键盘导致页面fixed布局错乱的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
下面小编就为大家分享一篇vue实现图片滚动的示例代码(类似走马灯效果)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论