颜色选择器（ColorPicker）

Element-UI 的颜色选择器组件用于颜色选择，支持多种颜色格式和透明度选择。

提示

颜色选择器（ColorPicker）组件官方文档：https://element.eleme.cn/#/zh-CN/component/color-picker (opens new window)

1. 基本用法

基本语法：在 Vue 组件中使用 <el-color-picker> 标签创建颜色选择器，通过 v-model 绑定颜色值。

<template>
  <el-color-picker v-model="color"></el-color-picker>
</template>

<script>
export default {
  data() {
    return {
      color: '#ff0000' // 初始颜色值
    };
  }
};
</script>

• v-model 绑定：颜色选择器的值通过 v-model 与 color 绑定。当用户选择颜色时，color 会自动更新。
• 

ColorPicker 属性

参数	说明	类型	可选值	默认值
value / v-model	绑定值	string	—	—
disabled	是否禁用	boolean	—	false
size	尺寸	string	medium / small / mini	—
show-alpha	是否支持透明度选择	boolean	—	false
color-format	写入 v-model 的颜色的格式	string	hsl / hsv / hex / rgb	hex（show-alpha 为 false）/ rgb（show-alpha 为 true）
popper-class	ColorPicker 下拉框的类名	string	—	—
predefine	预定义颜色	array	—	—

ColorPicker 事件

事件名称	说明	回调参数
change	当绑定值变化时触发	当前值
active-change	面板中当前显示的颜色发生改变时触发	当前显示的颜色值

2. 颜色选择器示例

基础颜色选择器

<template>
  <el-color-picker v-model="color"></el-color-picker>
</template>

<script>
export default {
  data() {
    return {
      color: '#ff0000' // 初始颜色值
    };
  }
};
</script>

支持透明度选择

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

<script>
export default {
  data() {
    return {
      color: 'rgba(255, 0, 0, 0.5)' // 初始颜色值，包含透明度
    };
  }
};
</script>

• 透明度选择：通过 show-alpha 属性启用透明度选择，color 可以包含透明度信息。
• 

预定义颜色

<template>
  <el-color-picker v-model="color" :predefine="predefineColors"></el-color-picker>
</template>

<script>
export default {
  data() {
    return {
      color: '#ff0000', // 初始颜色值
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585'
      ] // 预定义颜色数组
    };
  }
};
</script>

• 预定义颜色：通过 predefine 属性设置预定义颜色，用户可以快速选择预定义的颜色。
• 

自定义颜色格式

<template>
  <el-color-picker v-model="color" color-format="rgb"></el-color-picker>
</template>

<script>
export default {
  data() {
    return {
      color: 'rgb(255, 0, 0)' // 初始颜色值，使用 RGB 格式
    };
  }
};
</script>

• 颜色格式：通过 color-format 属性设置颜色的格式，可以选择 hsl、hsv、hex 或 rgb。
• 

总结

• 灵活的属性配置：通过 show-alpha、predefine、color-format 等属性可以自定义颜色选择器的行为和样式。
• 丰富的事件处理：支持 change 和 active-change 事件，允许开发者在颜色值变化时进行自定义处理。
• 多样的展示方式：支持多种颜色格式和透明度选择，通过 show-alpha 和 color-format 属性进行配置。