vue主题换肤（持续更新，欢迎补充）

需求概况

换肤要求侧边栏背景色，所有button，switch，高亮文字颜色等同时改变

项目概况

基于element-ui开发的vue项目，实现换肤主要使用vue样式绑定:style及封装el-button的组件，用户主题色存储在vuex中

基本实现原理

想法比较无脑，控制主题颜色在vuex中存储，通过样式绑定以及自定义组件实现样式变更以达到换肤效果

一步步实现

1. 在`vuex`中先储存主题变量

//  主题池
themeList: [
   {
       backgroundColor: '#4d71ee',
       color: '#fff'
    },
    {
       backgroundColor: '#304156',
       color: '#fff'
    }
],
//  主题
theme: {
    backgroundColor: '#4d71ee',
    color: '#fff'
}

2.导航栏绑定主题配色

//  第一步 在script中导入存储在vuex中的主题变量
computed: {
  theme () {
    return this.$store.state.theme
  }
}

//  第二步 在template中绑定变量
<template>
  <el-menu :router="true"
    class="nav-menu"
    :default-active="active"
    :background-color="theme.backgroundColor"
    :text-color="theme.color"
    :active-text-color="theme.color"
  >
  // 中间编写导航内容（el-submenu及el-menu-item）
  </el-menu>
</template>

3.封装`el-button`的组件，在全局引入组件

第一步封装el-button组件

//  第一步 封装el-button组件
<template>
  <el-button
    :size="size"
    :type="type"
    :loading="loading"
    :disabled="disabled"
    :style="{
      'backgroundColor': theme.backgroundColor,
      'borderColor': theme.backgroundColor,
    }"
    @click="handleClick">
    {{label}}
  </el-button>
</template>

<script>
export default {
  name: 'bxButton',
  props: {
    label: {  // 按钮显示文本
      type: String,
      default: 'Button'
    },
    size: {  // 按钮尺寸
      type: String,
      default: 'mini'
    },
    type: {  // 按钮类型
      type: String,
      default: null
    },
    loading: {  // 按钮加载标识
      type: Boolean,
      default: false
    },
    disabled: {  // 按钮是否禁用
      type: Boolean,
      default: false
    },
    perms: {  // 按钮权限标识，外部使用者传入
      type: String,
      default: null
    }
  },
  data() {
    return {
    }
  },
  computed: {
    theme () {
      return this.$store.state.theme
    }
  },
  methods: {
    handleClick: function () {
      // 按钮操作处理函数
      this.$emit('click', {})
    }
  },
  mounted() {
  }
}
</script>

第二步在main.js中引入全局组件

//  第二步 在`main.js`中引入全局组件
import elButton from '@/components/themeButton'

Vue.component(elButton.name, elButton)

第三步在页面中使用封装好的bx-button组件
注意:
a.这里是bx-button不是el-button,如需更改可以更改第一步里script标签中的组件名name；
b.之前写在el-button中的内容现在需要写在bx-button的label属性中，否则不生效；

//  第三步 在页面中使用封装好的bx-button组件
<bx-button
  class="confirm"
  type="primary"
  @click="handleClick"
  label="确认"
></bx-button>

4. 给el-switch加上主题配色（由于项目中el-switch使用不多，因此没有制作组件，如需制作组件请参考bx-button的制作方式）
//  第一步 在script中导入存储在vuex中的主题变量
computed: {
  theme () {
    return this.$store.state.theme
  }
}
//  第二步 改变配色
<el-switch
  v-model="scope.row.status"
  :active-color="theme.backgroundColor"
  @change="changeSwitch(scope.row)"
></el-switch>

做到这里基本满足了目前版本的换肤需求，后期如果其他换肤需求会持续更新
ps：其实还想做得更人性化一点的换肤，即用户在色彩盘中选择自己喜欢的颜色进行换肤，实现原理基本一致，这里没有使用css实现换肤就是有局限性，通过vuex来存储变量后期的可扩展性更强

各位如有更好的建议欢迎补充~~~

vue主题换肤（持续更新，欢迎补充）