使用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 (<Popovercontent={<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实现前端取色器相关推荐

React + Canvas 像素风格取色器
前言有时候我们需要通过图片去获得具体像素的颜色.而强大的 Canvas 为我们提供了现成的接口. 这个功能其实并不难,只不过我们需要正确的理解 Canvas 并学会利用它的 API . 如果你急于看 ...
vue-color-picker-sheldon使用说明（一款基于Vue的取色器/颜色选择器）
vue-color-picker-sheldon使用说明(一款基于Vue的取色器/颜色选择器) Introduction 简介 Functions 功能点 Install 安装 Usage 用法 CS ...
el-color-picker-sheldon使用说明（一款基于Vue和ElementUI的取色器）
el-color-picker-sheldon使用说明(一款基于Vue和ElementUI的取色器) Introduction 简介 Functions 功能点 Install 安装 Usage 用法 ...
react中实现取色器的效果React Color
前言: react中实现取色器的效果官网地址:入口源码:https://github.com/casesandberg/react-color.git 实现效果: 步骤: 第一:引入 npm in ...
React取色器组件
react-color组件 ant-design上居然没有取色器相关的组件.从github上找到一个下载安装:npm install react-color --save 页面引入:import { ...
实例讲解基于 React+Redux 的前端开发流程
前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 star 数达 42000 +,超过了 jquery 的 39000+,也即将超过前几年比较火的an ...
原生js颜色选择器取色器组件
文件结构展示文件结构目录 color-index.js config.js color - picker-index.js 上传太多代码不是很好看,,我上传的都不收费, 完整代码包点击下载如不能下载 ...
10款屏幕取色器/颜色拾取工具软件介绍及下载地址[转]
10款屏幕取色器/颜色拾取工具软件介绍及下载地址(附截图) 2009年12月07日 14:13 在做网页设计和程序界面的时候,看到比较喜欢的图片颜色,总是要拾取下来应用到自己的网页或图片的颜色中,但是 ...
LVS集群---做前端调度器搭建使用
LVS集群--->在这里做前端调度器搭建使用,工作模式用的LVS-nat和LVS-dr. ++++++++++++++++++++++++++++++++++++++++++++++++++++ ...
Android --- 新版本取色器吸管工具点击无效，没反应
今天更新的 Android Studio ,在使用取色器吸管取色的时候发现点击没反应,发现不是没反应,而是很久之后才会有反应,我也不知什么情况,到网上搜索解决办法. 解决方法: 双击 shift,然后 ...

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

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

背景

安装

使用

使用react-color实现前端取色器相关推荐

最新文章

热门文章