Easy UI

ColorPicker 颜色选择器 ​

用于颜色选择，支持多种颜色格式。

引入 ​

js

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

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

html
<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

自定义样式 ​

移步到 CSS Part。

基础用法 ​

基础的颜色选择器用法。

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>

透明度支持 ​

支持透明度选择。

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

预定义颜色 ​

提供预定义颜色选项。

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();

不同尺寸 ​

提供不同尺寸的颜色选择器。

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>

独立面板 ​

直接使用颜色选择器面板。

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 ​

参数说明类型可选值默认值
value绑定值String—""
disabled是否禁用Boolean—false
clearable是否可清空Boolean—false
size尺寸String'small' | 'medium' | 'large'""
color-format颜色格式String'hsl' | 'hsv' | hex | 'rgb'"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 ​

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

ColorPicker Methods ​

方法名说明参数
show手动显示颜色选择器面板—
hide手动隐藏颜色选择器面板—
focus使颜色选择器获得焦点—
blur使颜色选择器失去焦点—

ColorPicker Events ​

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

ColorPickerPanel API ​

ColorPickerPanel Attributes ​

参数说明类型可选值默认值
value绑定值String—""
color-format颜色格式String'hsl' | 'hsv' | hex | 'rgb''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 Events ​

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