circular-color-picker v1.0.14

circular-color-picker

圆环颜色选择器

安装

npm i circular-color-picker --save-dev

使用

const colorWheel = new ColorWheel(config);
// 通过监听colorChange 事件获取但前的颜色值
interface IColorValue {
  // rgb颜色
  rgb: {
    r: number,
    g: number,
    b: number,
  };
  // 十六进制颜色
  hex: string;
  // 滑块的位置信息
  dotPosition: {
    left: number,
    top: number,
  };
}
colorWheel.addListener('colorChange', (data: IColorValue) => {
  console.log(data);
});

config options

Events

colorChange

每次拖拽都会触发 colorChange 事件，事件的返回值是一个包含了当前位置颜色信息的对象；

colorPicker.addListener('colorChange', (data: IColorValue) => {
  console.log(data);
});

Events

setDotPosition(left: number, y: number)

设置滑块的位置

demo

html template

<div>
  <div class="picker-container" id="color-picker"></div>
</div>

js

@Component
export default class App extends Vue {
  mounted() {
    const colorWheel = new ColorWheel({
      size: 535,
      containerId: 'color-picker',
      pipeCircleSize: 100,
      dotClass: 'dot-class',
      dotPositon: {
        left: 100,
        top: 400,
      },
    });

    colorWheel.addListener('colorChange', (data: IColorValue) => {
      console.log(data);
    });

    setTimeout(() => {
      colorWheel.setDotPosition(300, 400);
    }, 3000);
  }
}