React Color使用
<h2 id="需求">需求</h2><h4 id="--要在react项目中实现颜色获取器功能">- 要在react项目中实现颜色获取器功能</h4>
<h2 id="解决方案">解决方案</h2>
<h4 id="--使用react-color-依赖">- 使用react-color 依赖</h4>
<h4 id="--git地址httpsgithubcomcasesandbergreact-color">- git地址：https://github.com/casesandberg/react-color</h4>
<h4 id="--文档地址httpcasesandberggithubioreact-colorapi-onchange">- 文档地址：http://casesandberg.github.io/react-color/#api-onChange</h4>
<h2 id="使用">使用</h2>
<h4 id="1-安装react-color-依赖">1. 安装react color 依赖</h4>
<pre><code>yarn add react-color @types/react-color
</code></pre>
<ul>
<li>项目中没有使用typescript时，不需要@types/react-color</li>
</ul>
<h4 id="2-按需引入">2. 按需引入</h4>
<pre><code>import React from 'react';
import { SketchPicker } from 'react-color';
function ColorPicker{
const = useState("#333");
render() {
return <SketchPicker
color={color}
onChangeComplete={ (color:any)=>setColor(color.hex) }
/>;
}
}
</code></pre>
<ul>
<li>除了<code>SketchPicker</code>，还有<code>Chrome</code> <code>Photoshop</code> <code>Block</code> <code>Github </code> <code>Twitter</code> <code>Hue</code> <code>Alpha</code> <code>Circle</code> <code>Slider</code> <code>Compact</code> <code>Material</code> <code>Swatches</code>几种，可以根据需要引入相应组件。</li>
</ul>
<h2 id="api">API</h2>
<h4 id="1-color">1. color</h4>
<ul>
<li>颜色选择器颜色选中值，即可接收hex<code>'#333'</code>，也可以接受rgb<code>{ r: 51, g: 51, b: 51, a: 1 }</code>，也可以接受hsl<code>{ h: 0, s: 0, l: .10, a: 1 }</code></li>
</ul>
<h4 id="2-onchange">2. onChange</h4>
<ul>
<li>每次颜色改变都会触发该方法，返回color对象<code>color:{hex: '#333', rgb: {r: 51, g: 51, b: 51, a: 1 },hsl:{ h: 0, s: 0, l: .10, a: 1 }</code></li>
</ul>
<h4 id="3-onchangecomplete">3. onChangeComplete</h4>
<ul>
<li>颜色选择完成后触发该方法，与onChange类似，我理解是onChange的优化，onChange触发相对频繁，如果仅是获取选中的颜色，使用onChangeComplete即可。</li>
</ul><br><br>
来源：https://www.cnblogs.com/shellon/p/15236685.html
頁:
[1]