Element ui colorpicker在Vue中的使用

先要有一个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 = this