Element UI 颜色选择器 ColorPicker 组件深度解析-CSDN博客

Element UI 颜色选择器 ColorPicker 组件深度解析

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

组件概述

Element UI 的 ColorPicker 是一个功能强大的颜色选择器组件，它支持多种颜色格式的选择和显示，包括 HEX、RGB、HSL、HSV 等。该组件不仅提供了直观的界面让用户选择颜色，还支持透明度调节和预定义颜色功能，是前端开发中处理颜色选择的理想工具。

基本用法

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

<template>
  <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>
</template>

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

在这个例子中，我们展示了两种常见的使用场景：带默认值和不带默认值的颜色选择器。组件会自动处理颜色的显示和选择。

透明度支持

ColorPicker 支持透明度（Alpha 通道）的选择，只需要添加 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 格式。

预定义颜色

为了提高用户体验，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',
          '#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>

预定义颜色支持所有 ColorPicker 能处理的颜色格式，包括 HEX、RGB、RGBA、HSL、HSLA、HSV 和 HSVA。

尺寸选项

ColorPicker 提供了四种尺寸选项，可以适应不同的界面需求：

<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>

组件属性详解

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|------|------| | 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 | — | — |