一、demo效果

二、使用步骤

1.安装vue-color插件

在终端窗口中输入以下命令 安装插件
npm install vue-color

2.引入组件Sketch

使用import语法引入Sketch组件
import { Sketch } from 'vue-color'

3.注册组件

  components: {
    'sketch-picker': Sketch
  },

4.在html部分使用组件

<sketch-picker v-model="color" @input="updateValue"></sketch-picker>

5.处理点击事件

// 颜色输入框点击事件处理
  colorInputClick () {
    this.isShowColors = !this.isShowColors
  },
  // 颜色值改变事件处理
  colorValueChange (val) {
    console.log(val)

    // 取颜色对象的十六进制值
    this.color = val.hex
  }

三、demo代码

<template>
  <el-col class="controls-box">
    <el-col :span="8" class="label-col"><label>请选择颜色</label></el-col>
    <el-col :span="16">
      <div @click="colorInputClick">
        <el-input disabled :value="color" @click="colorInputClick"></el-input>
      </div>
      <div v-show="isShowColors" class="color-select-layer">
        <sketch-picker v-model="color" @input="colorValueChange"></sketch-picker>
      </div>
    </el-col>
  </el-col>
</template>
<script>
import { Sketch } from 'vue-color'
export default {
  components: {
    'sketch-picker': Sketch
  },
  data () {
    return {
      isShowColors: true,
      color: '#3f3f3f'
    }
  },
  methods: {
    // 颜色输入框点击事件处理
    colorInputClick () {
      this.isShowColors = !this.isShowColors
    },
    // 颜色值改变事件处理
    colorValueChange (val) {
      console.log(val)

      // 取颜色对象的十六进制值
      this.color = val.hex
    }
  }
}
</script>

<style>
.controls-box {
  position: absolute;
  left: 150px;
  top: 50px;
  width: 300px;
  padding: 10px;
  background-color: #fafafa;
  border: 1px solid #c3c3c3;
  border-radius: 5px;
}
.label-col {
  padding: 8px 5px;
}
.color-select-layer {
  position: relative;
  left: -36px;
  top: 10px;
  padding: 15px 0;
}
</style>