elementui :on-凯发k8官方网

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

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

colorpicker 颜色选择器，是element ui 提供的组件，我们可以直接使用。

...

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

1、封装一个theme-picker组件

2、解析

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

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

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

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

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

上面代码种，我们已经将，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

细心的小伙伴是不是发现这里过了一个变量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数据状态持久化

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

总结

以上是凯发k8官方网为你收集整理的elementui :on-remove怎么用_vue vuex element ui实现动态全局主题颜色的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。