ew-color-picker

简体中文

English

简体中文

English

Appearance

Predefine 预定义颜色 ​

ewColorPickerPredefine 在面板内渲染一排预设色块，点击即可快速切换到常用颜色。

项值
包@ew-color-picker/predefine
pluginNameewColorPickerPredefine
applyOrder未显式声明（按注册顺序）
挂载点panelContainer
访问实例core.plugins.ewColorPickerPredefine

配置项 ​

配置类型默认值说明
predefineColor(string | { color: string; disabled?: boolean })[][]预定义颜色列表；为空时不渲染
changeColor(rgba: string) => void—点击色块后的回调，参数为 rgba() 字符串
disabledbooleanfalse全局禁用后点击无效

两种数组写法 ​

ts
// 纯字符串
predefineColor: ['#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#a855f7']

// 带禁用项
predefineColor: [
  { color: '#ef4444' },
  { color: '#22c55e', disabled: true },
  { color: '#3b82f6' },
]

校验规则 ​

  • 使用严格颜色格式校验，只保留合法的 hex / rgb / hsl / 具名色等；
  • 非法颜色会在渲染前被过滤掉；
  • 点击时仍会再次校验，非法值会 warn 且不改色。

实例方法 ​

ts
const predefine = picker.plugins.ewColorPickerPredefine
方法 / 属性签名说明
updatePredefineColors(colors: string[] | PredefineColor[]) => void替换颜色列表并重新渲染、重新绑定事件
setDisabled(index: number, disabled: boolean) => void按索引启用/禁用单个色块
onPredefineColorClick(event: Event, color: string) => void点击处理逻辑（防抖 100ms）
predefineItemsHTMLElement[]色块 DOM 列表
containerHTMLElement | null色块容器

运行时更新 ​

ts
picker.plugins.ewColorPickerPredefine.updatePredefineColors([
  '#000000', '#ffffff', '#64748b',
])

picker.plugins.ewColorPickerPredefine.setDisabled(0, true)

点击行为 ​

  1. 命中色块并检查是否带 -disabled 类；
  2. 若全局 disabled 为 true，直接阻止事件；
  3. 给当前色块加 ew-color-picker-predefine-color-active，移除其它色块的高亮；
  4. 校验颜色 → 转换为 rgba → 同步 core.hsvaColor → core.setColor(rgba)；
  5. 调用 options.changeColor?.(rgba)。

事件 ​

改色经由 core.setColor()，并会正常触发 change：

ts
picker.on('change', (color) => console.log('预定义色块：', color))

DOM 结构 ​

html
<div class="ew-color-picker-predefine-container">
  <div class="ew-color-picker-predefine-color">
    <div class="ew-color-picker-predefine-color-item" style="background:#ef4444"></div>
  </div>
  <div class="ew-color-picker-predefine-color ew-color-picker-predefine-color-disabled">…</div>
  <div class="ew-color-picker-predefine-color ew-color-picker-predefine-color-active">…</div>
</div>
类名说明
.ew-color-picker-predefine-container色块容器
.ew-color-picker-predefine-color单个色块外层
.ew-color-picker-predefine-color-item颜色填充层
.ew-color-picker-predefine-color-disabled禁用态
.ew-color-picker-predefine-color-active当前选中态

完整示例 ​

ts
const picker = new ewColorPicker({
  el: '#app',
  defaultColor: '#3b82f6',
  predefineColor: [
    '#ef4444',
    '#f97316',
    '#eab308',
    '#22c55e',
    '#3b82f6',
    '#a855f7',
    { color: '#0f172a', disabled: true },
  ],
  changeColor: (rgba) => console.log('选中预设色：', rgba),
})

相关 ​