博客

因为ant desgin vue没有颜色选择器一说 本人用vcolorpicker引入一直报错…. 思来想去用来 vue-color插件

//场景  项目需要仪表单形式选择前景色以及背景色 提交数据 渲染到表格 还有编辑回显颜色功能

//万年不变的先下载

npm install vue-color

然后引入

    import { Sketch } from 'vue-color'

 components: {
'sketch-picker': Sketch
}
//注册使用

//页面中展示

     <a-form-item label='前景色'>
           <div style="color: white;">
            <a-button  @click="colorInputClick1" class="colorNo1" :style="styleVar">
//绑定style 是通过动态获取data中颜色数据改变按钮颜色
               </a-button>
              </div>
               <div v-show="isShowColor1" class="color-select-layer">
               <sketch-picker  v-model="color" @input="colorValueChange1" color-format="hex"></sketch-picker>
             </div>
             </a-form-item>
//data中
data(){
   // 前景色
                color: '#000000',
    // 颜色选择器显示
             isShowColor1:false,
}

//自带@input事件

            // 颜色值改变事件处理
        colorValueChange1(val) {
            // 取颜色对象的十六进制值
            this.color = val.hex
        },
//将颜色赋给data中color

拿到颜色怎么赋给按钮

  // 在计算属性中计算颜色变化
computed: {
            styleVar() {
                return {
                    '--button-color': this.color,
                }
            }
}

//在样式中

.colorNo1{
    background-color: var(--button-color);
}

//添加  
handleOk(e) {
            e.preventDefault()
                 this.form.validateFields((err, values) => {
                if (err) return
//添加时将颜色赋给表单里对应的颜色字段 
                     values.foreColor = this.color
                     values.backColor = this.color1
                    getCodeUpdate(values).then(res => {
                        console.log(values);
                        message.success('修改成功')
                        this.visible = false
                        this.$refs.table.refresh()
                        this.resetForm()
                    }
}
        },

//修改回显时也一样
   // 编辑框
            handleEdit(record) {
                this.visible = true
                this.$nextTick(() => {
                    console.log(record,'编辑框');
                    this.imageUrl = record.img
//颜色为空时使用data中默认颜色
                    if (record.foreColor || record.backColor == null) {
                       this.color = record.foreColor 
                       this.color1 = record.backColor 
                     }
                      this.color=record.foreColor
                      this.color1=record.backColor
                    this.form.setFieldsValue(pick(record, fields))
            })
        },

//其实用其他插件会简单点 但是我是小白重写给之前的删掉不甘心 咬着牙一步步实现了简单的效果