首先要有一個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
效果如下: