pickr.js颜色选取网页组件

pickr.js颜色选取网页组件源码下载

看看谁在用

查看文件结构

文件大小:0.01M

资源分类: 插件-选择和筛选

更新时间: 2021-04-03

pickr.js是一款颜色选取网页组件,支持十六进制、RGB、HSV CMYK颜色格式。

初始化颜色选取组件
const pickr = new Pickr({
      el: '.example',
      default: '#42445A' // default color
});
定义位置
const pickr = new Pickr({
      el: '.example',
      default: '#42445A',
      position: 'middle', // or 'top', 'left'
});
颜色转换器
hsva.toHSVA()
hsva.toHSLA()
hsva.toRGBA()
hsva.toHEX() 
hsva.toCMYK()
hsva.clone()
一些API方法
// 设置一个颜色
myPickr.setHSVA(h,s,v,a)

// 获取已选择颜色
myPickr.getSelectedColor()

// 显示
myPickr.show()

// 隐藏
myPickr.hide()

// disables the color picker
myPickr.disable()

// 设置可用
myPickr.enable()

// 是否打开
myPickr.isOpen()

// 返回 DOM 元素
myPickr.getRoot():HTMLElement

// 获取颜色
myPickr.getColor()

// 销毁
myPickr.destroy()

// 销毁和移除
myPickr.destroyAndRemove()

// 改变当前颜色方式 HEX, RGBA, HSVA, HSLA and CMYK,
myPicker.setColorRepresentation(type:String);

// 保存颜色
myPicker.applyColor(silent:Boolean);

// 添加一个颜色
myPicker.addSwatch(color:String);

// 移除取色板
myPicker.removeSwatch(index:Number);
一些事件方法
myPicker.on('init', instance => {
    console.log('init', instance);
}).on('save', (color, instance) => {
    console.log('save', color, instance);
}).on('change', (color, instance) => {
    console.log('change', color, instance);
}).on('swatchselect', (color, instance) => {
    console.log('swatchselect', color, instance);
}).on('clear', (instance) => {
    console.log('clear', instance);
}).on('cancel', (instance) => {
    console.log('cancel', instance);
}).on('hide', (instance) => {
    console.log('hide', instance);
}).on('show', (instance) => {
    console.log('show', instance);
}).on('changestop', (instance) => {
    console.log('changestop', instance);
});

pickr.js颜色选取网页组件

正在加载文件目录...

也许你还喜欢

  1. 省市地区四级联动js插件
  2. js时间背景时钟插件
  3. js拖动范围选择插件
  4. 自定义滚动条js插件TrueScrollBar
  5. JS弹出选取自定义颜色插件
  6. JS选择颜色切换背景颜色
多用途ReactJs模板软件产品公司网站
  • 标签查找|关于我们|用户协议|格式化工具|bootstrapmb.com 版权所有 苏ICP备17077179号-2