JS 选色器 colorpicker.js 使用与下载

一、简介

• 选色器 colorpicker.js 源码，支持取得 hex、rgb 色值。

  

二、使用方法

• 下载 https://github.com/dengzemiao/colorpicker.js 。

• 导入

  <script src="./colorpicker.js"></script>
  

• html 中将个一个 div 作为容器 id 设置为 color-picker

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

• js 调用插件

  var cp = Colorpicker.create({
      // 容器标签
      el: "color-picker",
      // 视图层级
      // zIndex: 2,
      // 固定透明度为 1 ，但不可修改
      // color: "#000fff",
      // 固定透明度为 1 ，但不可修改
      // color: "rgb(0, 255, 0)",
      // 透明度也会生效，但不可修改
      color: "rgba(0, 255, 0, 0.5)",
      change: function (el, hex, rgba) {
          el.style.backgroundColor = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
          // el.style.backgroundColor = hex;
          // console.log(el, hex, rgba);
          console.log(hex, rgba);
      }
  })
  // 可以调用内部方法，一般用不上
  // setTimeout(() => { cp.hide() }, 2000);