用React-color制作取色器的方法操作是什�
Admin 2022-07-06 群英技术资�
我们可以通过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;
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
私有变量的概念是,在任何函数中定义的变量,都是私有变量,因为不能在函数外部访问这些变量。与其他Java,C++语言等不同,在JavaScript中是没有私有属性的不能用关键字来声明的私有变量。在JavaScript是没有私有属性的概念的,所有属性都是公用的�
这篇文章主要给大家介绍了关于Node.js中异步生成器与异步迭代的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
网页展示文字的方式有很多,将文字刻在3D图形上的你有没有看到过呢?将文字刻在3D图形上,文字能够随着图形一起运动,视觉效果呈现更酷炫。那么这是如何实现的呢?three.js是一款运行在浏览器中�3D引擎,我们能用它创建各种三维场景。因此,我们能够尝试使用three.js来复�3D动态文字效果�
这篇文章主要为大家介绍了Vue之Axios异步通信,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
现在很多网站都有搜索的功能,而经常搜索访问的朋友应该会注意的,再次搜索的时候会有搜索历史的显示,那么这样效果是怎样做的呢?本文就给大家介绍一下利用jquery插件怎样做一个搜索历史的功能�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078