vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue项目实现切换主题色思路

Vue项目如何实现切换主题色思路

作者: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方法修改。

最终达到效果。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文