目录Vue项目切换主题色思路需求实现效果实现思路总结Vue项目切换主题色思路 需求 用户通过取色器选择自己喜欢的颜色,替换项目中的主题色 实现效果 实现思路 在项目中使用的是les
用户通过取色器选择自己喜欢的颜色,替换项目中的主题色
在项目中使用的是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方法修改。
最终达到效果。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: Vue项目如何实现切换主题色思路
本文链接: https://www.lsjlt.com/news/177664.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0