Day 177/200 React 颜色选择器

1、需求

在React+Ant Design的项目中，需要选择颜色。
Ant Design 没有合适的组件。

2、React-color

找到了这个插件，周下载量103w

官方给了Demo

import React from 'react'
import reactCSS from 'reactcss'
import { SketchPicker } from 'react-color'class SketchExample extends React.Component {state = {displayColorPicker: false,color: {r: '241',g: '112',b: '19',a: '1',},};handleClick = () => {this.setState({ displayColorPicker: !this.state.displayColorPicker })};handleClose = () => {this.setState({ displayColorPicker: false })};handleChange = (color) => {this.setState({ color: color.rgb })};render() {const styles = reactCSS({'default': {color: {width: '36px',height: '14px',borderRadius: '2px',background: `rgba(${ this.state.color.r }, ${ this.state.color.g }, ${ this.state.color.b }, ${ this.state.color.a })`,},swatch: {padding: '5px',background: '#fff',borderRadius: '1px',boxShadow: '0 0 0 1px rgba(0,0,0,.1)',display: 'inline-block',cursor: 'pointer',},popover: {position: 'absolute',zIndex: '2',},cover: {position: 'fixed',top: '0px',right: '0px',bottom: '0px',left: '0px',},},});return (<div><div style={ styles.swatch } onClick={ this.handleClick }><div style={ styles.color } /></div>{ this.state.displayColorPicker ? <div style={ styles.popover }><div style={ styles.cover } onClick={ this.handleClose }/><SketchPicker color={ this.state.color } onChange={ this.handleChange } /></div> : null }</div>)}
}export default SketchExample

3、实际开发

1、我用的这种形式

2、需要十六进制转Rgba转格式

this.hexToRgba(this.props.toolColor)

hexToRgba(hex) {return {r: parseInt('0x' + hex.slice(1, 3)),g: parseInt('0x' + hex.slice(3, 5)),b: parseInt('0x' + hex.slice(5, 7)),a: '1',};
}

3、二次组件渲染问题

需要从父组件获取数据，重新渲染组件。

最后贴下全部代码

// Copyright 2021 zhaoarden
import React from 'react'
import reactCSS from 'reactcss'
import { SketchPicker } from 'react-color'class SketchColor extends React.Component {constructor(props){super(props)this.state={displayColorPicker: false,}}hexToRgba(hex) {return {r: parseInt('0x' + hex.slice(1, 3)),g: parseInt('0x' + hex.slice(3, 5)),b: parseInt('0x' + hex.slice(5, 7)),a: '1',};}// rgbaTohex(color) {//     return '#'+Number(color.r).toString(16)+Number(color.g).toString(16)+Number(color.b).toString(16);// }handleClick = () => {this.setState({ displayColorPicker: !this.state.displayColorPicker })};handleClose = () => {this.setState({ displayColorPicker: false })};handleChange = (color) => {this.setState({ color: color.rgb })this.props.setTooloColor(color.hex)};render() {const {toolColor}=this.propslet colorData=this.hexToRgba(toolColor)const styles = reactCSS({'default': {color: {width: '36px',height: '14px',borderRadius: '2px',background: `rgba(${ colorData.r }, ${ colorData.g }, ${ colorData.b }, ${ colorData.a })`,},swatch: {padding: '5px',background: '#fff',borderRadius: '1px',boxShadow: '0 0 0 1px rgba(0,0,0,.1)',display: 'inline-block',cursor: 'pointer',},popover: {position: 'absolute',zIndex: '2',},cover: {position: 'fixed',top: '0px',right: '0px',bottom: '0px',left: '0px',},},});return (<div><div style={ styles.swatch } onClick={ this.handleClick }><div style={ styles.color } /></div>{ this.state.displayColorPicker ? <div style={ styles.popover }><div style={ styles.cover } onClick={ this.handleClose }/><SketchPicker color={ colorData } onChange={ this.handleChange } /></div> : null }</div>)}
}export const ChooseColor = React.memo(SketchColor)

以上

参考资料

http://casesandberg.github.io/react-color/

Day 177/200 React 颜色选择器相关推荐

react - 颜色选择器
颜色选择器 nmp i react-color import React, {useState} from "react"; import {Button, Modal} from ...
【canvas系列】用canvas实现一个colorpicker（类似PS的颜色选择器）
每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ** ...
vue颜色选择器_如何制作？ Vue的颜色选择器！
vue颜色选择器 by ZAYDEK 由ZAYDEK 如何制作? Vue的颜色选择器! (How to make a ? color picker with Vue!) 注意:颜色看起来可能比实际颜色 ...
[ExtJS] 颜色选择器2.0
之前做了一版颜色选择器控件,但是颜色比较少,UI上也不太好这次改良了一下: 在面板上增加了多种颜色旧版: ...
Android 自定义View颜色选择器（条形、水平），使用HSV颜色模型实现取色器并反向定位颜色所在位置
轻松实现一个简单的Android条形水平颜色选择器,可以通过设置颜色值反向定位滑块 Demo地址:https://github.com/DonTiny/ColorPickDemo 效果图: 先贴完整代 ...
练习-原生js写的颜色选择器colorpicker
colorpicker 文章目录 colorpicker 需求分析: 第一种方案的颜色选择器: 点击色块选择颜色进行了改进, 把整个颜色选择器封装到js文件里, 通过appendChild的形式添加 ...
P37 JColorChooser颜色选择器
P37 JColorChooser颜色选择器 1.概述 2.代码实例 3.效果演示系统:Win10 Java:1.8.0_333 IDEA:2020.3.4 Gitee:https://gitee. ...
原生js颜色选择器取色器组件
文件结构展示文件结构目录 color-index.js config.js color - picker-index.js 上传太多代码不是很好看,,我上传的都不收费, 完整代码包点击下载如不能下载 ...
js颜色选择器制作分析
给html元素设置事件监听, 触发事件弹出颜色选择器颜色选择器绘制获取上次选择的颜色(当前颜色) 绘制渐变色板(canvas) (方法: 横轴渐变ff0000, ffff00, 00ff00, ...
Ubuntu中的颜色选择器实用程序（彩色移液器）[关闭]
本文翻译自:Color picker utility (color pipette) in Ubuntu [closed] I'am looking for a color picker utilit ...

Day 177/200 React 颜色选择器

1、需求

2、React-color

3、实际开发

1、我用的这种形式

2、需要十六进制转Rgba转格式

3、二次组件渲染问题

参考资料

Day 177/200 React 颜色选择器相关推荐

最新文章

热门文章