Element UI 颜色选择器 ColorPicker 使用指南

张亭齐Crown

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

阅读量244

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00743/article/details/148324577

版权

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="colorValue"></el-color-picker>

示例代码：

<div class="block">
  <span class="demonstration">带默认值</span>
  <el-color-picker v-model="color1"></el-color-picker>
</div>
<div class="block">
  <span class="demonstration">不带默认值</span>
  <el-color-picker v-model="color2"></el-color-picker>
</div>

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

说明：

组件默认显示为 Element UI 的主题蓝色 (#409EFF)
可以通过 v-model 绑定到数据属性
当不设置默认值时，初始状态为空

透明度支持

ColorPicker 支持带有透明度的颜色选择，只需添加 show-alpha 属性：

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

示例代码：

<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，0 表示完全透明

预定义颜色

为了提高用户体验，可以预先定义一组常用颜色：

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

示例代码：

<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',
          '#ff8c00',
          '#ffd700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585',
          'rgba(255, 69, 0, 0.68)',
          'rgb(255, 120, 0)',
          'hsv(51, 100, 98)',
          'hsva(120, 40, 94, 0.5)',
          'hsl(181, 100%, 37%)',
          'hsla(209, 100%, 56%, 0.73)',
          '#c7158577'
        ]
      }
    }
  };
</script>

注意：

预定义颜色支持多种格式：HEX、RGB、RGBA、HSL、HSLA、HSV、HSVA
颜色会显示在弹出面板的下方，方便用户快速选择

尺寸设置

ColorPicker 提供四种尺寸选项，与其他 Element UI 组件保持一致：

<el-color-picker v-model="color"></el-color-picker>
<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>

可用尺寸：

默认大小（不指定 size 属性）
medium（中等）
small（小）
mini（迷你）

组件属性详解

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

事件说明

| 事件名称 | 说明 | 回调参数 | | -------------- | -------------------------------------- | ------------------ | | change | 当绑定值变化时触发 | 当前颜色值 | | active-change | 当前激活的颜色变化时触发 | 当前激活的颜色值 |