自定义颜色选择器的实现与应用（react-color，二次封装）

在现代的前端开发中，颜色选择器是一个非常实用的组件，它允许用户通过图形界面选择颜色，并将其应用到应用程序中。本文将介绍如何实现一个自定义的颜色选择器，并支持多种颜色格式的返回值。

1. 引言

颜色选择器在许多应用场景中都非常有用，例如网页设计工具、图形编辑器、主题定制工具等。本文将使用 React 和 react-color 库来实现一个功能强大的颜色选择器，并支持用户选择不同的颜色格式（如 hex、rgb、rgba、hsl）。

2. 项目准备

首先，确保你已经安装了 React 和 react-color 库。如果没有安装，可以使用以下命令进行安装：

js 复制代码

npm install react react-dom react-color antd

3. 实现颜色选择器

3.1 引入必要的库

在你的 React 组件文件中引入必要的库和样式：

js 复制代码

import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { ChromePicker } from 'react-color';
import styles from "./index.module.less";
import { Popover } from "antd";

3.2 定义组件

定义 ColorPicker 组件，并设置其属性和状态：

js 复制代码

const ColorPicker = (props) => {
  const {
    onChange,
    colorValue,
    disabled,
    colorTitle,
    triggerPicker,
    previewStyle,
    colorReturnType
  } = props;
  const [color, setColor] = useState('');

  // 选取颜色
  const handleChangeComplete = (color) => {
    if (disabled) {
      return;
    }
    let colorVal;
    switch(colorReturnType) {
      case 'hex':
        colorVal = color.hex;
        break;
      case 'rgba':
        colorVal = `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.rgb.a})`;
        break;
      case 'rgb':
        colorVal = `rgb(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b})`;
        break;
      case 'hsl':
        colorVal = `hsl(${Math.round(color.hsl.h)}, ${Math.round(color.hsl.s * 100)}%, ${Math.round(color.hsl.l * 100)}%)`;
        break;
      default:
        colorVal = color.hex;
    }
    setColor(colorVal);
    onChange(colorVal);
  };

  useEffect(() => {
    setColor(colorValue);
  }, [colorValue]);

  return (
    <>
      {
        !disabled &&
        <Popover
          overlayClassName={styles.popover}
          content={
            <ChromePicker
              className={styles.sketchPicker}
              color={color}
              onChangeComplete={handleChangeComplete}
            />
          }
          title={colorTitle}
          trigger={triggerPicker}
        >
          <div className={styles.colorPicker} style={previewStyle}>
            <div className={styles.colorPickerColor} style={{background: colorValue}}/>
          </div>
        </Popover>
      }
      {
        disabled &&
        <div className={`${styles.colorPicker} ${styles.colorPickerDisabled}`} style={previewStyle}>
          <div className={styles.colorPickerColor} style={{background: colorValue}}/>
        </div>
      }
    </>
  );
}

3.3 设置属性类型和默认值

使用 PropTypes 定义组件的属性类型，并设置默认值：

js 复制代码

ColorPicker.propTypes = {
  // 事件
  onChange: PropTypes.func,
  // 值
  colorValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
  // 是否禁用
  disabled: PropTypes.bool,
  // 显示拾色器标题，默认不展示
  colorTitle: PropTypes.string,
  // 预览区样式，自定义预览区
  previewStyle: PropTypes.object,
  // 触发方式
  triggerPicker: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
  // 选择完颜色返回的格式
  colorReturnType: PropTypes.oneOf(['hex', 'rgb', 'rgba', 'hsl'])
};

ColorPicker.defaultProps = {
  disabled: false,
  colorTitle: '',
  previewStyle: {},
  triggerPicker: 'click',
  colorReturnType: 'hex',
}

3.4 样式文件

在 index.module.less 文件中添加样式：

css 复制代码

.colorPicker {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(33, 40, 61, 1);
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.colorPickerColor {
  width: 100%;
  height: 100%;
}

.colorPickerDisabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.popover {
  padding: 10px;
}

.sketchPicker {
  width: 100%;
}

4. 使用颜色选择器

在你的应用中使用 ColorPicker 组件。以下是一个示例：

js 复制代码

import React, { useState } from 'react';
import PanelTitle from './../PanelTitle';
import { Form, Select, Space, InputNumber, Switch, Radio } from 'antd';
import ColorPicker from './../ColorPicker';

const GlobalConfig = () => {
  const [bgColor, setBgColor] = useState('#ffffff');
  const [colorFormat, setColorFormat] = useState('hex');

  return (
    <div>
      <PanelTitle title='全局配置' />
      <Form name='form' autoComplete='off'>
        <Form.Item name='colorFormat' label='颜色格式'>
          <Select
            value={colorFormat}
            onChange={(format) => setColorFormat(format)}
            options={[
              { value: 'hex', label: 'HEX' },
              { value: 'rgba', label: 'RGBA' },
              { value: 'rgb', label: 'RGB' },
              { value: 'hsl', label: 'HSL' },
            ]}
          />
        </Form.Item>
        <Form.Item name='screenBgColor'>
          <ColorPicker
            previewStyle={{ width: '100%' }}
            onChange={(color) => {
              console.log(color, 'color----');
              setBgColor(color);
            }}
            colorValue={bgColor}
            colorReturnType={colorFormat}
          />
        </Form.Item>
      </Form>
    </div>
  );
};

export default GlobalConfig;

5. 总结

通过本文，我们实现了一个功能强大的自定义颜色选择器，并支持多种颜色格式的返回值。这个颜色选择器可以很容易地集成到任何 React 应用中，为用户提供直观且易于使用的颜色选择功能。希望这篇文章对你们有所帮助！如果有任何问题或建议，请随时留言。