PickerColor 颜色选择器

介绍

用于颜色选择。通过 HSV 面板选择颜色，支持透明度、颜色预设；可用 HEX(A) / RGB(A) / HSV(A) / HSL(A) 切换输入。开启透明度时分别为 HEXA、RGBA、HSVA、HSLA。

基础用法

通过 v-model 绑定当前选中颜色。

<picker-color
  v-model="color"
  title="基础用法"
  @confirm="handleConfirm"
  @cancel="handleCancel"
/>

import { PickerColorSelectedData } from 'vital-design';

const color = ref('#66ccff');

// 确认操作
function handleConfirm(data: PickerColorSelectedData) {
  ...
}

// 取消操作
function handleCancel(data: PickerColorSelectedData) {
  ...
}

限制透明度选择

通过 alpha 属性开启/关闭透明度选择。

<picker-color
  v-model="color"
  title="限制透明度选择"
  :alpha="false"
/>

import { PickerColorSelectedData } from 'vital-design';

const color = ref('#66ccff');

自定义颜色预设

通过 colors 属性自定义颜色预设。

<picker-color
  v-model="color"
  title="自定义颜色预设"
  :colors="colors"
  @confirm="handleConfirm"
  @cancel="handleCancel"
/>

import { PickerColorSelectedData } from 'vital-design';

const color = ref('#66ccff');

const colors = [
  '#333333',
  '#1989fa',
  '#07c160',
  '#ff976a',
  '#ee0a24',
  '#b38bff',
  '#f3aec3',
  '#f3da5c',
  '#ab7839',
];

API

Props

参数	说明	类型	默认值
v-model	选中颜色	string	-
title	标题	string	-
alpha	是否开启透明度设置	boolean	true
colors	预设颜色列表	string[]	[...]
confirm-button-text	确认按钮文字	string	-
cancel-button-text	取消按钮文字	string	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
update:model-value	选中颜色更新时触发	string
change	切换时触发	string
updated	更新时触发	PickerColorSelectedData
confirm	确认时触发	PickerColorSelectedData
cancel	取消时触发	PickerColorSelectedData

Slots

名称	说明
toolbar	工具栏

Expose

方法名	说明	参数	返回值
getSelectedData	获取选中数据	-	PickerColorSelectedData
confirm	确认选择	-	-
cancel	取消选择	-	-

类型定义

组件导出以下类型定义：

import type {
  PickerColorSelectedData,
  PickerColorInstance,
  PickerColorFormat,
} from 'vital-design';