My environment

@vue/cli 4.5.8
node - v10.15.0
npm - 6.4.1

Idea:

vue project has two parts to realize skin change

1, Self style skin change

This part of skin change has been posted on the Internet in a variety of ways. I won't say much here. If you see people here, you must have seen a lot of posts

Tell me what I think

Considering the online implementation ideas are too complex
 Those with namespace are replaced css File, useful packaging tools to achieve
 And I can't understand it

Because only the theme color needs to be changed, and the embellishment color does not need to be realized according to the project requirements, and most of the embellishment colors are color matched with element UI

In view of the above considerations, I only need to have a global variable. After each click on the color component, I get the color value and synchronize it to the label

Think about the vue framework, which can get global data and insert dom

It's best to have a global variable

In a flash of light, there are three steps to realize:

1. mixin implements variables that do not need to be defined everywhere;
2. vuex is assigned to this variable;
3. Click the color component to update vuex;

But how can I change the color dynamically? If I just change the background color, I can bind the style dynamically

But sometimes it may be border line color, and sometimes it may be text color

So I decided to make an instruction and render dynamically according to the instruction

With the idea, the code is:

Add a new one mixin.js file

export default {
    name: 'mixin',
    computed: {
        mTheme () {
          return this.$store.state.theme;
        }
    }
}

In main JS is introduced and injected into Vue In mixin

import mixin from '@/mixin.js'
Vue.mixin(mixin);

Add a state attribute theme to the top level of vuex

const store = new Vuex.Store({
    state: {
        theme: '#5E72F4'
    }
})

Create a new component theme Vue, and use the El color picker component to package it into a theme replacement component

<template>
    <div class="theme">
        <el-color-picker
            v-model="color" 
            @change="handleOnColor" 
            size="small"
        ></el-color-picker>
    </div>
</template>

<script>
export default {
    name: 'Theme',
    data () {
        return {
            color: ''
        };
    },
    created() {
        this.color = this.mTheme;
    },
    watch: {
        mTheme(val) {
            this.color = val;
        }
    },
    computed: {
        theme () {
            return this.$store.state.theme;
        }
    },
    methods: {
        handleOnColor(value) {
            this.$store.dispatch('UPDATE_THEME', value);
        }
    },
    destroyed () {
    }
}
</script>

<style lang="scss" scoped>
</style>

To man JS register a global component

import Theme from "@/components/theme.vue";
Vue.component("en-theme", Theme);

Add an 'Update' to the store_ action of 'there'

const store = new Vuex.Store({
    actions: {
        UPDATE_THEME({ commit }, val) {
            commit('updateTheme', val)
        }
    }
})

Create a theme JS file to implement a custom instruction

export const theme = {
    bind: function (el, binding, vnode) {
        setEleStyleColorAttribute(el, binding);
    },
    update: function (el, binding, vnode) {
        setEleStyleColorAttribute(el, binding);
    },
    componentUpdated: function (el, binding, vnode) {
        setEleStyleColorAttribute(el, binding);
    }
}

function setEleStyleColorAttribute(el, binding) {
    const {name, value, arg, expression, modifiers} = binding;
    const {background, font, border} = modifiers;
    if (background) el.style['background-color'] = value;
    if (font) el.style.color = value;
    if (border) el.style['border-color'] = value;
}

Then go to the place where you want the binding instruction to implement the topic change

<div v-theme.background="mTheme" class="img-logo" :id="'custom' + index">
  {{ name.slice(0, 1) }}
</div>

2, Element UI skin change

I also copied this part on the Internet. Let's put the link for you. Ideas as like as two peas

Touch your hand and take you to the backstage with vue series 3 (Practical chapter)

Final effect

The green arrow part is where the element UI realizes skin change;

The purple part is where no skin change treatment has been added;

The sidebar and circular icons are where custom styles can be used to achieve skin changes

The level is limited. Please forgive me for the deficiencies