需求:用户通过取色器选择自己喜欢的颜色,替换项目中的主题色

实现效果:

实现思路:

在项目中使用的是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方法修改。最终达到效果。

 

Logo

前往低代码交流专区

更多推荐