element ui修改主题色(elementui改变主题色)

点击右上方红色按钮，关注“网络秀”，让你真正露脸。
序言中经常使用Element UI的朋友应该知道，Element UI的官方文档是可以自由变换主题的。那么，我们如何在自己的项目中使用这个函数呢？其实官方文件也有说明。这里解释的比较详细清楚，提供一个简单的例子供大家参考。
ColorPicker ColorPicker颜色选择器，是Element UI提供的组件，可以直接使用。
.用起来也很简单。下面我们可以通过这个组件改变全局主题颜色。
Evuex元素ui动态全局主题颜色1。封装主题选择器组件。
2.分析
监听theme(颜色选择器的值)，如果有变化，通过getThemeCluster函数计算出一系列与主题值相关的主题颜色。
getcssString方法是获取远程(由元素ui提供)主题CSS样式文件。取回样式后，使用updateStyle方法用我们自己重新计算的颜色替换远程提取的样式。
最后，创建一个样式标签，将新的主题样式写入其中。元素UI的所有相关组件的主题颜色将被替换。
但是如果这是我们的定制组件呢？颜色怎么处理？
这里我们使用vuex LocalStorage来管理主题颜色值。
Vuex LocalStorage动态与元素UI组件无关。我们已经存储了上面的代码类型，主题。如果有不会管理vuex LocalStorage持久状态的小伙伴可以点击《Vuex+localStorage数据状态持久化》，这里就不做过多介绍了。
通过提交将颜色存储在存储中。
这个。$ store.com麻省理工学院(types.m _ theme _ color，this.theme)然后让它通过state:
计算： {.mapstate({ theme color 3360 state=state . commons . theme color })} } } } { 0 } } { 0 } { 0 } { 0 } { 0 } { 0 } { 0 } { 0 } { 0 } { 0 } { 0 } { 0 } { 0 }
细心的朋友有没有发现这里有一个变量backgroundColor，是通过themeColor重新计算的？
BackgroundColor () {//返回一个颜色的三原色const tint color=(color)={ let red=parse int(color . slice(0，2)，16)let green=parse int(color . slice(2，4))，16)let blue=parse int(color . slice(4，6)，16) return [red，green，blue]} let color=this . theme color . replace(‘ # ‘，’)color=tintColor(color) //转换为rgba格式，并添加透明度返回` RGBA ($ {color [0]，$ .所以很容易得到动态的主题色不是吗？等不及你的项目支持动态主题了，那就自己试试吧。
有什么推荐的文章Vuex？Vuex能做什么？Vuex怎么用？
Exlocal存储数据状态持久性
如果你喜欢边肖或者认为边肖的文章对你有帮助，可以点击一波关注！同时，想要源代码的合作伙伴可以点击下面的“了解更多”。