一、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>