Element UI 颜色选择器 ColorPicker 组件详解

余洋婵Anita

于 2025-05-30 09:06:18 发布

阅读量301

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00241/article/details/148324568

Element UI 颜色选择器 ColorPicker 组件详解

element A Vue.js 2.0 UI Toolkit for Web 项目地址: https://gitcode.com/gh_mirrors/eleme/element

组件概述

Element UI 的 ColorPicker 是一个功能强大的颜色选择器组件，支持多种颜色格式和丰富的自定义选项。它为开发者提供了直观的颜色选择界面，可以轻松集成到各种前端项目中。

基本用法

ColorPicker 组件的基本使用非常简单，只需要通过 v-model 绑定一个字符串类型的变量即可：

<el-color-picker v-model="color1"></el-color-picker>
<el-color-picker v-model="color2"></el-color-picker>

<script>
  export default {
    data() {
      return {
        color1: '#409EFF',  // 带有默认值
        color2: null       // 无默认值
      }
    }
  };
</script>

使用要点

组件支持设置默认颜色值
也可以不设置默认值，此时颜色选择器将显示为空白
绑定的颜色值可以是任何有效的 CSS 颜色字符串

透明度支持

ColorPicker 支持带透明度的颜色选择，只需添加 show-alpha 属性即可启用透明度滑块：

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

<script>
  export default {
    data() {
      return {
        color: 'rgba(19, 206, 102, 0.8)'  // 带透明度的颜色值
      }
    }
  };
</script>

透明度功能说明

启用后会在颜色选择器中显示透明度调节滑块
颜色值格式会自动转换为 rgba 格式
透明度范围从 0（完全透明）到 1（完全不透明）

预定义颜色选项

ColorPicker 支持预定义颜色选项，方便用户快速选择常用颜色：

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

<script>
  export default {
    data() {
      return {
        color: 'rgba(255, 69, 0, 0.68)',
        predefineColors: [
          '#ff4500',  // 十六进制颜色
          'rgba(255, 69, 0, 0.68)',  // rgba颜色
          'rgb(255, 120, 0)',  // rgb颜色
          'hsv(51, 100, 98)',  // hsv颜色
          'hsva(120, 40, 94, 0.5)',  // hsva颜色
          'hsl(181, 100%, 37%)',  // hsl颜色
          'hsla(209, 100%, 56%, 0.73)'  // hsla颜色
        ]
      }
    }
  };
</script>

预定义颜色功能特点

支持多种颜色格式混合定义
颜色选项会显示在颜色选择器的底部
可以大幅提升用户选择颜色的效率

尺寸设置

ColorPicker 提供了多种尺寸选项，适应不同场景的需求：

<el-color-picker v-model="color" size="medium"></el-color-picker>
<el-color-picker v-model="color" size="small"></el-color-picker>
<el-color-picker v-model="color" size="mini"></el-color-picker>

尺寸选项说明

medium：中等尺寸（默认）
small：小尺寸
mini：迷你尺寸
不设置 size 属性时使用默认中等尺寸

组件属性详解

| 属性名 | 说明 | 类型 | 可选值 | 默认值 | |-------|------|------|--------|--------| | value / v-model | 绑定值 | string | — | — | | disabled | 是否禁用 | boolean | — | false | | size | 尺寸 | string | medium/small/mini | medium | | show-alpha | 是否显示透明度滑块 | boolean | — | false | | color-format | 颜色格式 | string | hsl/hsv/hex/rgb | hex(无透明度时)/rgb(有透明度时) | | popper-class | 自定义下拉框类名 | string | — | — | | predefine | 预定义颜色 | array | — | — |