PickerColor 颜色选择器

介绍

用于颜色选择，通过HSV颜色模型选择，支持透明度设置、颜色预设。

基础用法

通过 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

事件名	说明	回调参数
click	点击时触发	MouseEvent
change	切换时触发	string
confirm	确认时触发	PickerColorSelectedData
cancel	取消时触发	PickerColorSelectedData

Slots

名称	说明
toolbar	工具栏