使用react-color实现前端取色器的方法
更新时间:2021年11月11日 16:35:19 作者:Boale_H
本文通过代码给大家介绍了使用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前端取色器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
解析react 函数组件输入卡顿问题 usecallback react.memo
useMemo是一个react hook,我们可以使用它在组件中包装函数。可以使用它来确保该函数中的值仅在依赖项之一发生变化时才重新计算,这篇文章主要介绍了react 函数组件输入卡顿问题 usecallback react.memo,需要的朋友可以参考下2022-07-07react性能优化useMemo与useCallback使用对比详解
这篇文章主要为大家介绍了react性能优化useMemo与useCallback使用对比详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-08-08全栈轻量级搭配之Remix Prisma Sqlite使用分析
这篇文章主要为大家介绍了全栈轻量级搭配之Remix Prisma Sqlite使用示例分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-05-05
最新评论