颜色选择器 ColorPicker

对应 Arco ColorPicker 的触发器配色，面板保留 Element Plus 布局。 属性用法见 Element Plus 文档。

触发器与尺寸

点击色块打开面板，size 提供三档尺寸。

<script setup lang="ts">
import { ref } from 'vue'
const color = ref('#165dff')
</script>

<template>
  <el-color-picker v-model="color" size="small" />
  <el-color-picker v-model="color" />
  <el-color-picker v-model="color" size="large" />
  <el-color-picker v-model="color" disabled />
</template>

透明度与内联面板

el-color-picker-panel 可在页面内直接展示透明度和预设色。

<script setup lang="ts">
import { ref } from 'vue'
const color = ref('rgba(22, 93, 255, 0.8)')
const predefine = ['#165dff', '#00b42a', '#ff7d00', '#f53f3f']
</script>

<template>
  <el-color-picker-panel v-model="color" show-alpha :predefine="predefine" />
</template>

与 Arco 的差异

• 色相条竖排，底部为颜色输入框和 Clear / Confirm，与 Arco 面板布局不同。
• 禁用时保留 Element Plus 色块透明度以区分状态。