ck-color-picker

基于Vue的颜色选择器插件

演示地址

说明

如果对您有帮助，您可以点右上角 "Star" 支持一下 谢谢！ ^_^

或者您可以 "follow" 一下，我会不断开源更多的有趣的项目

特别感谢@Eeearth-Van提供的算法支持，辛苦了🌹

如有问题请直接在 Issues 中提，或者您有什么更好的建议

安装

$ npm install ck-color-picker -S

使用

在 main.js 文件中引入插件并注册

# main.js
import ckColorPicker from 'ck-color-picker'
Vue.use(ckColorPicker)

在项目中使用 ck-color-picker

<template>
  <ck-color-picker v-model="color" :show.sync='show'/>
</template>
<script>
  export default {
    data () {
      return {
        color: '#ff0000',
        show: true
      }
    }
  }
</script>

特点

1. 可实现拖动选择颜色、透明度，颜色实时更新
2. 只需控制show即可控制展示与消失，不依赖与其他控件
3. 可实现随机颜色，选择困难症挚爱

选项

参数	说明	类型	可选值	默认值
v-model/value	颜色绑定值	string	—	—
color-format	输出颜色的格式	string	hex/rgb	rgb
show.sync	是否显示组件	boolean	true/false	true

事件

change颜色值改变的时候触发

<ck-color-picker v-model="color" @change="headleChangeColor" />