Easy UI

Appearance

ColorPicker 颜色选择器 ​

用于颜色选择，支持多种颜色格式（hex/rgb/hsl/hsv/rgba）、透明度选择和预定义颜色。

引入 ​

html
<script type="module">
  import "./node_modules/easy-component-ui/dist/components/ea-color-picker.js";
</script>
js
import "easy-component-ui/ea-color-picker";

自定义样式 ​

移步到 CSS Part 和 CSS Custom Properties。

基础用法 ​

基础的颜色选择器用法，支持设置默认值和可清空模式。

With default value
With no default value
查看代码
html
<div class="demo">
  <div class="demo-color-block">
    <span class="demonstration">With default value</span>
    <ea-color-picker value="#409eff"></ea-color-picker>
  </div>
  <div class="demo-color-block">
    <span class="demonstration">With no default value</span>
    <ea-color-picker></ea-color-picker>
  </div>
</div>

禁用状态 ​

禁用颜色选择器，禁用后无法点击打开面板。

查看代码
html
<div class="demo">
  <ea-color-picker value="#409eff" disabled></ea-color-picker>
  <ea-color-picker value="#67c23a" disabled></ea-color-picker>
</div>

透明度支持 ​

通过 show-alpha 属性支持透明度选择。

查看代码
html
<div class="demo">
  <ea-color-picker value="rgba(19, 206, 102, 0.8)" show-alpha></ea-color-picker>
</div>

预定义颜色 ​

通过 predefine 属性提供预定义颜色选项。

查看代码
html
<div class="demo">
  <ea-color-picker id="predefinePicker" value="#409eff"></ea-color-picker>
</div>
js
const predefineExample = {
  picker: document.querySelector("#predefinePicker"),
  predefineList: [
    "#ff4500",
    "#ff8c00",
    "#ffd700",
    "#90ee90",
    "#00ced1",
    "#1e90ff",
    "#c71585",
  ],

  init() {
    this.picker.predefine = this.predefineList;
  },
};
predefineExample.init();

不同尺寸 ​

提供 small、默认和 large 三种尺寸的颜色选择器。

查看代码
html
<div class="demo">
  <ea-color-picker value="#409eff" size="small"></ea-color-picker>
  <ea-color-picker value="#409eff"></ea-color-picker>
  <ea-color-picker value="#409eff" size="large"></ea-color-picker>
</div>

独立面板 ​

直接使用颜色选择器面板组件 ea-color-picker-panel。

查看代码
html
<div class="demo">
  <ea-color-picker-panel value="#409eff"></ea-color-picker-panel>
  <ea-color-picker-panel
    value="rgba(64, 158, 255, 0.5)"
    show-alpha
  ></ea-color-picker-panel>
</div>

ColorPicker API ​

ColorPicker Attributes ​

参数说明类型可选值默认值
label标签文本String—""
value绑定值String—""
disabled是否禁用Boolean—false
required是否必填Boolean—false
clearable是否可清空Boolean—false
size尺寸String'small' | 'medium' | 'large'""
color-format颜色格式String'hsl' | 'hsv' | 'hex' | 'rgb' | 'rgba'"hex"
show-alpha是否支持透明度Boolean—false
tabindexTab 键遍历顺序Number—0
placement弹出位置String'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'"bottom"
predefine prop预定义颜色Array—[]

ColorPicker CSS Part ​

名称说明
form-label表单标签
container根容器
popper弹出层
trigger触发器
outer外层容器
inner内层容器
icon-wrapper图标包裹层
status-icon状态图标
panel颜色选择器面板
footer-actions底部操作按钮区域
clear-btn清除按钮
confirm-btn确认按钮

ColorPicker CSS Custom Properties ​

属性名说明默认值
--ea-color-picker-size触发器尺寸32px
--ea-color-picker-border-radius触发器圆角var(--border-radius-sm)
--ea-color-picker-border-color触发器边框颜色var(--grey-200)
--ea-color-picker-border-color-focus聚焦时边框颜色var(--primary-color)
--ea-color-picker-background-color触发器背景颜色var(--white)
--ea-color-picker-background-color-disabled禁用时背景颜色var(--grey-100)

ColorPicker Methods ​

方法名说明参数
show手动显示颜色选择器面板—
hide手动隐藏颜色选择器面板—
focus使颜色选择器获得焦点—
blur使颜色选择器失去焦点—
checkValidity检查表单验证是否通过—
reportValidity报告表单验证结果—

ColorPicker Events ​

事件名说明回调参数(event.detail)
change颜色值改变时触发{ value: string }
ea-clear清空颜色值时触发—
ea-active-change颜色激活值改变时触发{ value: string }

ColorPickerPanel API ​

ColorPickerPanel Attributes ​

参数说明类型可选值默认值
value绑定值String—""
color-format颜色格式String'hsl' | 'hsv' | 'hex' | 'rgb' | 'rgba''hex' (when show-alpha is false) | 'rgb' (when show-alpha is true)
show-alpha是否支持透明度Boolean—false
disabled是否禁用Boolean—false
border是否显示边框Boolean—false
clearable是否可编辑，开启后显示输入框允许用户直接输入颜色值Boolean—true
predefine prop预定义颜色Array—[]

ColorPickerPanel CSS Part ​

名称说明
container容器
wrapper包裹层
svpanel饱和度/亮度面板
svpanel-cursor饱和度/亮度光标
hue-slider色调滑块
hue-slider-thumb色调滑块按钮
alpha-slider透明度滑块
alpha-slider-thumb透明度滑块按钮
predefine预定义颜色区域
predefine-colors预定义颜色列表
predefine-color预定义颜色项
footer底部区域
text-display文本显示区域（仅在非clearable模式显示）
color-input颜色输入框（仅在clearable模式显示）
append插槽区域

ColorPickerPanel CSS Custom Properties ​

属性名说明默认值
--ea-color-picker-panel-border-radius面板圆角var(--border-radius-md)
--ea-color-picker-panel-box-shadow面板阴影var(--shadow-lg)
--ea-color-picker-panel-background-color饱和度面板背景颜色#ff0000
--ea-color-picker-panel-border-color边框颜色var(--grey-200)
--ea-color-picker-panel-padding面板内边距var(--spacing-md)
--ea-color-picker-panel-svpanel-width饱和度面板宽度280px
--ea-color-picker-panel-svpanel-height饱和度面板高度180px
--ea-color-picker-panel-hue-slider-width色调滑块宽度12px
--ea-color-picker-panel-hue-slider-height色调滑块高度180px
--ea-color-picker-panel-alpha-slider-width透明度滑块宽度280px
--ea-color-picker-panel-alpha-slider-height透明度滑块高度12px
--ea-color-picker-panel-predefine-item-size预定义颜色项尺寸20px

ColorPickerPanel Events ​

事件名说明回调参数(event.detail)
change颜色值改变时触发{ value: string, color: Color }
ea-active-change颜色激活值改变时触发{ value: string }
ea-invalid-color输入的颜色格式不合法时触发{ value: string }

ColorPickerPanel Methods ​

方法名说明参数
resetCursorPosition重置所有滑块光标位置—