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