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 
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值