先要有一个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
效果如下:
如果需要在全局引进的话需要用到VUEX
在template里面:
<el-color-picker v-model="color" show-alpha @change="changeColor" style="left:100px"></el-color-picker>
在data里面
data () {
return {
color: ' '
}
}
在methods和created里面:
methods: {
changeColor (color) {
this.color = color
this.$store.commit('setColor',color)
}
},
created () {
this.color