组件

Color picker 颜色选择

颜色选择；data-pvs-colorpicker 预设色板 + 原生 color input，触发 pvs-colorpicker:change。

默认

<div class="pvs-colorpicker" data-pvs-colorpicker data-pvs-colorpicker-value="#2563eb" style="max-width:12rem">
  <button type="button" class="pvs-colorpicker__trigger">
    <span class="pvs-colorpicker__swatch">
    </span>
    <span class="pvs-colorpicker__value">#2563eb</span>
  </button>
  <div class="pvs-colorpicker__panel">
    <div class="pvs-colorpicker__grid">
    </div>
    <input class="pvs-colorpicker__native" type="color" />
  </div>
</div>

Preset grid

JS 根据主题色生成预设格；选中后更新 __value 与 __swatch。

<div class="pvs-colorpicker is-open" data-pvs-colorpicker style="max-width:14rem">
  <button type="button" class="pvs-colorpicker__trigger">
    <span class="pvs-colorpicker__swatch" style="background:#059669">
    </span>
    <span class="pvs-colorpicker__value">#059669</span>
  </button>
  <div class="pvs-colorpicker__panel">
    <div class="pvs-colorpicker__grid pvs-cluster pvs-gap-1" style="flex-wrap:wrap">
      <button type="button" class="pvs-colorpicker__option is-selected" style="background:#2563eb" aria-label="#2563eb">
      </button>
      <button type="button" class="pvs-colorpicker__option" style="background:#059669" aria-label="#059669">
      </button>
      <button type="button" class="pvs-colorpicker__option" style="background:#d97706" aria-label="#d97706">
      </button>
    </div>
    <input class="pvs-colorpicker__native" type="color" value="#059669" />
  </div>
</div>

数据属性

类名	说明
`data-pvs-colorpicker`	初始化色板
`data-pvs-colorpicker-value`	默认色值
`pvs-colorpicker:change`	CustomEvent · detail.value

类名速查

类名	说明
`pvs-colorpicker`	根（需 data-pvs-colorpicker）
`pvs-colorpicker__trigger / __swatch`	触发器与色块
`pvs-colorpicker__grid / __option`	预设色板
`pvs-colorpicker__native`	原生 color input