首先要有一个color-picker组件

  <el-color-picker v-model=”headcolor”></el-color-picker>

在data里面

data() { return {

headcolor: ’ #278add ’ //这里可以选择一个默认的颜色

} }

 

然后在你想要改变颜色的地方用v-bind绑定就好了，例如：

<el-header class=”header” style=”height:50px;” :style=”{background:headcolor}”>

这里的:style 还可以是:class

这样就可以动态改变主题颜色了，其他的用法可以参考官方例子：https://element.eleme.io/#/zh-CN/component/color-picker

 

效果如下：

 

版权声明：本文为zhihua30原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zhihua30/p/11207857.html