使用react-color实现前端取色器的方法

背景

我们可以通过react-color实现前端界面的取色器，效果如下图所示：

安装

npm i react-color -s

使用

import react, { component, fragment, createref } from 'react';
import { popover } from 'antd';
import { sketchpicker } from 'react-color';

type statetype = {
  subtitlecolor: string;
};
type proptype = {
  [propname: string]: any;
};
interface handlecreatevideobyhotnews {
  state: statetype;
  props: proptype;
}

class handlecreatevideobyhotnews extends component {
  constructor(props: any) {
    super(props);
    this.state = {
      subtitlecolor: '#fff',
    }
  }

  // 修改字幕字体颜色
  private setsubtitlefontcolor = (e: any): void => {
    console.log(e);
    this.setstate({
      subtitlecolor: e.hex,
    });
  }

  render() {
    const { subtitlecolor } = this.state;

    return (
      <popover
        content={<sketchpicker color={subtitlecolor}
        onchange={(e) => {this.setsubtitlefontcolor(e)}}
        onchangecomplete={(e) => {this.setsubtitlefontcolor(e)}} />}
        trigger="click"
      >
        <div classname="create-hotnews-video-popup-operate-item-titleset-item-operate font-color-set">
          <div classname="font-color-set-value">{subtitlecolor}</div>
          <div classname="font-color-set-show" style={{backgroundcolor: subtitlecolor}}></div>
        </div>
      </popover>
    )
  }
}

export default handlecreatevideobyhotnews;

到此这篇关于使用react-color实现前端取色器的文章就介绍到这了,更多相关ct-color前端取色器内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！