/ColorPicker

基于Vue开发的一款颜色选择器

Primary LanguageVue

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" />