ew-color-picker事件驱动 · 插件化颜色选择器

体积小、可组合、可扩展。核心只管颜色与事件，界面交给插件自由拼装。

快速开始

在线演示

API 参考

🧩

插件化架构

Core 仅维护颜色状态与事件总线，Box、Panel、Input、Button 等全部以插件按需注册，可自由裁剪与扩展。

⚡

事件驱动

基于实例级 EventEmitter，change / sure / clear / toggle 等事件贯穿全流程，UI 与业务逻辑彻底解耦。

🎨

多色彩空间

内置 Hex、RGB、HSL 三种输入模式，支持透明度滑块、预定义色板与色相/透明度双方向布局。

📦

多包分发

13 个独立子包，既可一键引入聚合包，也可只安装需要的插件，天然支持 Tree Shaking。

🛡️

类型完备

全部包使用 TypeScript 编写并输出声明文件，配置项、插件方法、事件回调都有完整类型提示。

🌗

自适应细节

颜色盒图标依据 WCAG 相对亮度自动切换深浅，模式切换图标固定尺寸，多实例互不干扰。

立即体验

下面是一个真实运行的颜色选择器，由本站直接加载构建产物渲染。

从这里开始

5 分钟上手

安装、引入样式、初始化实例，三步渲染出第一个颜色选择器。

配置项速查

所有构造参数、插件开关、回调函数与默认值的完整说明。

插件体系

了解 10 个内置插件各自的职责、配置与方法，以及如何组合使用。

自定义插件

按照 pluginName / applyOrder 约定，编写可注册、可销毁的插件。

最小示例

一个容器、一份样式、一行初始化，即可获得完整的取色体验。

html

<link rel="stylesheet" href="@ew-color-picker/style/dist/index.css" />
<link rel="stylesheet" href="@ew-color-picker/style/dist/input-number.css" />

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

<script type="module">
  import ewColorPicker from '@ew-color-picker/ew-color-picker'

  const picker = new ewColorPicker({
    el: '#picker',
    defaultColor: '#6366f1',
    predefineColor: ['#6366f1', '#8b5cf6', '#06b6d4', '#22c55e'],
    changeColor(color) {
      console.log('当前颜色：', color)
    }
  })
</script>