# ui-color-picker 颜色选择器组
版本:v2.3.11
颜色选择器组件用于选择颜色,支持多种颜色格式和自定义配置
# 基本使用
<template>
<div class="color-picker-demo">
<ui-color-picker v-model="color" />
<p>当前颜色:{{ color }}</p>
</div>
</template>
<script setup>
import { ref } from 'vue';
const color = ref('#1989fa');
</script>
<style scoped>
.color-picker-demo {
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
</style>
# Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | String | '#1989fa' | 当前选中的颜色 |
format | String | 'hex' | 颜色格式,可选值:hex、rgb、rgba |
predefine | Array | - | 预定义颜色数 |
disabled | Boolean | false | 是否禁用颜色选择 |
# Events
| 事件 | 说明 | 回调参数 |
|---|---|---|
change | 颜色值改变时触发 | (color: String) 当前选中的颜色 |
open | 颜色选择器打开时触 | - |
close | 颜色选择器关闭时触发 | - |
# Slots
| 名称 | 说明 |
|---|---|
trigger | 自定义触发按 |