# 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' 颜色格式,可选值:hexrgbrgba
predefine Array - 预定义颜色数
disabled Boolean false 是否禁用颜色选择

# Events

事件 说明 回调参数
change 颜色值改变时触发 (color: String) 当前选中的颜色
open 颜色选择器打开时触 -
close 颜色选择器关闭时触发 -

# Slots

名称 说明
trigger 自定义触发按

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/base/color-picker/color-picker