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如何利用Echarts实现柱形图从右向左滚动的效果，文中的示例代码简洁易懂，感兴趣的小伙伴可以跟随小编一起学习一下2023-05-05
这篇文章主要介绍了基于mpvue的简单弹窗组件mptoast使用详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了Vue传递参数不在URL路径拼接显示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本文是小编给大家分享的vue实现仿淘宝结账页面实例代码，主要功能是仿照淘宝页面的结算购物车商品时自动算出合计价格的页面，具体实例代码大家参考下本文2017-11-11
Vue的小伙伴们,困扰大家的IE浏览器支持Vue的问题,目前已经找到了一个比较好的解决方案,下面这篇文章主要给大家介绍了关于vue项目兼容IE浏览器的教程步骤,需要的朋友可以参考下2023-03-03
Vite3结合Svelte3使用@import导入scss样式
这篇文章主要为大家介绍了Vite3结合Svelte3使用@import导入scss样式实现实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
今天来看看JavaScript中的一些实用的工具函数，希望能帮助你提高开发效率！需要的朋友可以参考下面文章的具体内容2021-10-10
轻量级富文本编辑器wangEditor结合vue使用方法示例
在我们项目中，有些时候需要使用富文本编辑器。本文将以百度开发的Ueditor结合Vue.js介绍一下。非常具有实用价值，需要的朋友可以参考下2018-10-10
这篇文章主要介绍了在vue里使用codemirror的两种用法,每种方法通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-08
这篇文章主要介绍了前端vue如何使用高德地图，帮助大家利用vue调用其他key，完成需求，感兴趣的朋友可以了解下2020-11-11
最新评论