ColorPicker 颜色选择器
ColorPicker 是一个支持多种颜色格式的颜色选择器。
基础用法
支持透明度选择
预定义颜色
尺寸
API
属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 绑定值 | string | — |
| disabled | 是否禁用 ColorPicker | boolean | false |
| size | ColorPicker 的尺寸 | 枚举 | — |
| show-alpha | 是否显示透明度滑块 | boolean | false |
| color-format | v-model 绑定的颜色格式 | 枚举 | — |
| popper-class | ColorPicker 下拉框的类名 | string / object | '' |
| popper-style 2.11.4 | ColorPicker 下拉框的自定义样式 | string / object | — |
| predefine | 预定义颜色选项 | object | — |
| validate-event | 是否触发表单验证 | boolean | true |
| tabindex | ColorPicker 的 tabindex | string / number | 0 |
| aria-label a11y 2.7.2 | ColorPicker 的 aria-label | string | — |
| empty-values 2.10.3 | 组件的空值，参见 config-provider | array | — |
| value-on-clear 2.10.3 | 清除返回值，参见 config-provider | string / number / boolean / Function | — |
| id | ColorPicker 的 id | string | — |
| teleported 2.7.2 | 颜色选择器弹出框是否被传送至 body | boolean | true |
| label a11y 已废弃 | ColorPicker 的 aria-label | string | — |
| persistent 2.10.5 | 当颜色选择器未激活且 persistent 为 false 时，颜色面板将被销毁 | boolean | true |
| append-to 2.10.5 | 颜色选择器面板附加到哪个元素 | CSSSelector / HTMLElement | - |
事件
| 名称 | 描述 | 类型 |
|---|---|---|
| change | 输入值改变时触发 | Function |
| active-change | 当前激活颜色改变时触发 | Function |
| focus 2.4.0 | 组件获得焦点时触发 | Function |
| blur 2.4.0 | 组件失去焦点时触发 | Function |
暴露
| 名称 | 描述 | 类型 |
|---|---|---|
| color | 当前颜色对象 | object |
| show 2.3.3 | 手动显示 ColorPicker | Function |
| hide 2.3.3 | 手动隐藏 ColorPicker | Function |
| focus 2.3.13 | 聚焦选择器元素 | Function |
| blur 2.3.13 | 选择器元素失焦 | Function |
来源
贡献者
