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