脚本宝典收集整理的这篇文章主要介绍了使用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-color实现前端取色器的方法全部内容,希望文章能够帮你解决使用react-color实现前端取色器的方法所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。