点击右上方红色按钮关注“web秀”，让你真正秀起来

前言

经常用Element UI的小伙伴，应该知道，Element UI官方文档，可以自由更换主题。那么，我们怎么把这个功能用到自己项目中呢？其实官方文档也有所说明，这里对其进行更详细，更明确的说明，同时提供简单示例，供大家参考。

ColorPicker 颜色选择器

ColorPicker 颜色选择器，是Element UI 提供的组件，我们可以直接使用。

<el-color-picker v-model="color"></el-color-picker> ... <script>  mode() {  > // 默认颜色  pt>e: '#409EFF'  }  } }; </script>

使用也是非常简单，下面我们能通过这个组件，改变全局的主题颜色

Vue + Vuex + Element UI动态全局主题颜色

1、封装一个theme-picker组件

2、解析

监听theme(颜色选择器的值)，如果发生变化，通过getThemeCluster函数，计算一系列theme值相关主题颜色。

getCSSString方法，是获取远程（element ui提供）的主题css样式文件。拿回来后，用updateStyle方法，把远程拉下来的样式替换为我们自己重新计算的的颜色。

最后，创建一个style标签，将新的主题样式，写入进去。所有Element UI相关组件主题颜色就会被替换。

但是如果是我们自定义的组件呢？颜色如何处理？

这里我们就用到了vuex + LocalStorage来管理，主题颜色值。

Vuex + LocalStorage动态与Element UI组件无关主题颜色

上面代码种，我们已经将，theme存储了起来，如果有不会vuex + LocalStorage持久化状态管理的小伙伴，可以点击《Vuex+localStorage数据状态持久化》，这里就不做过多的介绍了。

通过commit向store里面存储颜色。

this.$store.commit(types.M_THEME_COLOR, this.theme)

然后通过state获取：

computed: {  ...mapState({  themeColor: state => state.commons.themeColor  }) },

最后我们页面可以直接使用themeColor

<div :style="{  'border-color': themeColor,  'background-color': backgroundColor }"></div>

细心的小伙伴是不是发现这里过了一个变量backgroundColor，这个是通过themeColor重新计算的。

backgroundColor () {  // 返回某个颜色的三原色  const tintColor = (color) => {  let red = parseInt(color.slice(0, 2), 16)  let green = parseInt(color.slice(2, 4), 16)  let blue = parseInt(color.slice(4, 6), 16)   return [red, green, blue]  }  let color = this.themeColor.replace('#', '')  color = tintColor(color)  // 转成rgba格式的，并添加透明度  return `rgba(${color[0]}, ${color[1]}, ${color[2]}, .3)` }

这样就搞定了动态主题颜色，是不是很简单了？迫不及待的想让自己的项目也支持动态主题了吧，赶紧自己动手去试试吧。

推荐文章

Vuex是什么？Vuex能做什么？Vuex怎么使用？

Vuex+localStorage数据状态持久化

喜欢小编或者觉得小编文章对你有帮助的，可以点击一波关注哦！同时，要源码的小伙伴可以点击下方“了解更多”。