react-color一个不错的颜色选择组件

痛定思痛。 2022-10-20 13:58 198阅读 0赞

一个不错的选择颜色组件

import { SketchPicker } from 'react-color';

import React, { useState, useEffect } from 'react';
    import { Popover } from 'antd';
    import { SketchPicker } from 'react-color';
    import styles from './index.less';
    
    const ColorPicker = props => {
      const { value, style, onChange } = props;
      const [color, setColor] = useState({
        r: '255',
        g: '255',
        b: '255',
        a: '1',
      });
    
      useEffect(() => {
        setColor(value);
      }, [value]);
    
      return (
        <Popover
          overlayClassName={styles.popover}
          content={
            <SketchPicker
              color={color}
              onChange={hexColor => {
                setColor(hexColor.rgb);
                if (onChange) {
                  onChange(hexColor.rgb);
                }
              }}
            />
          }
          trigger="click"
        >
          <div className={styles.swatch} style={
       { ...style, background: `rgba(${ color.r }, ${ color.g }, ${ color.b }, ${ color.a })` }}></div>
        </Popover>
      );
    };
    
    export default ColorPicker;

index.less

@import '~antd/es/style/themes/default.less';
    
    .popover {
      :global {
        .ant-popover-inner-content {
          padding: 0;
        }
      }
    }
    
    .swatch {
      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;
    }

若没有组件的帮助，只能手动将十六进制颜色转为rgba()数组类型：颜色转化的完整代码