前言
项目中原有的颜色选择器无法满足选择所有颜色的需求，所以在git上搜罗了插件color-picker使用，下载链接github.com/react-compo…，其样式如下图，具体功能可在gitHub中体验。
用于项目中修改其样式为下图的样子，需求所有实现的功能为：
- 1、能够左右滑动滑动条选择颜色；
- 2、能够回显颜色值；
- 3、能够显示并隐藏大方形的颜色选择框；
接下来记录几个功能实现时碰到的问题：
1. 滑动条只能点击不能左右滑动，而且左右滑动时会触发外层走马灯tab的左右滑动？
解决过程：
- 1、首先给滑动条添加阻止事件冒泡后，不触发走马灯tab的滑动，但是滑动条仍然不能滑。
- 2、经排查发现，该插件在pc端可以正常滑动，在移动端不能。为了实现需求，将滑动条对应的源码Ribbon.js文件触发事件改为touchstart、touchmove、touchend，坐标获取用e.changedTouches[0].clientX，而不是e.clientX，颜色选择框对应源码Board.js文件同理；
修改后即可正常滑动，但是组件在走马灯上会触发外层滑动，添加了阻止事件冒泡代码后；不触发外层滑动且自身也无法滑动，这是由于源码中的滑动事件绑在了window上，将其绑在对应dom元素上，就顺滑啦~~
修改后：
2. 修改颜色选择器源码，实现通过点击滑动条和关闭按钮控制颜色选择框的隐藏和展示：
遇到的问题描述：颜色选择框包含在slider组件中，该组件的高度被设为了auto，且每个li元素设了绝对定位，因为脱离文档流，ul高度不能在颜色选择框隐藏显示的时候被自动被撑开，所以需要手动设置走马灯中ul的高度。
在Ribbon.js，滑动条点击事件和滑动事件中显示颜色选择框：
颜色选择框Board.js文件中通过createElelment添加dom元素，在dom元素上添加点击事件控制颜色选择框关闭；
3. 联调颜色选择模块时，出现滑动块抖动，且频繁操作颜色选择框，会出现app闪退；
解决过程：经排查，在onChange事件中颜色只要变动就触发接口数据发送，所以是颜色选择时频繁向接口发送数据导致的；
在源码Board.js、Ribbon.js和Panel.js中，设置一个key值，在停止拖动时才设为1，将key作为变量暴露出来。业务代码中key值为1才向接口发数据。
4. 选择白色、黑色等其它色域也有的颜色，滑动条会往回跳，调色盘和颜色选择圈也重新渲染。
如下图，在蓝色色域内选择左上角的白色后，下发接口数据导致组件的color属性变化重新渲染颜色框，该插件在展示白色这颜色的时候，会从左到右找，从而找到红色色域上的白色，所以导致，在其它色域中将颜色选择圈滑到左上角，滑动条就往回跳。
总而言之，滑动条和颜色选择圈会因为数据的重新渲染出现跳动；
尝试了三种解决方法：
方法1、只在初始化页面的时候渲染展示用户选择的颜色，选择颜色的过程中，不再重新渲染；
解决过程：在componentDidMount中获取当前颜色，并赋值给ColorPickerPanel组件的color属性，这样做会导致，拉动颜色选择框选中颜色后，滑动条和颜色选择圈又跳回默认颜色，因为color被固定住了，该方法不可行。
方法2、重新渲染数据就应该获取到滑动条和颜色选择圈的前一个位置信息，在重新渲染的时候将位置信息传进该组件。
解决过程：在源码中，将滑动条位置和颜色选择圈位置放进对象color，通过onChnage方法传出来（这部分可实现），在选择完颜色重新渲染的时候再通过color属性传回组件ColorPickerPanel（这部分，可以通过改变color属性的数据类型将其传回组件，但是后续对该变量进行处理比较麻烦，阅读了多个涉及到的js文件，并尝试对位置信息初始化的代码进行改动，最终未实现）。
另外，该方法即使实现了，也可预见，如果频繁选择颜色，颜色选择框在渲染时会出现延迟抖动，导致用户体验不佳。所以尝试第三个方法。
方法3、另一个办法，不给组件传默认值，颜色选择器只用于选择颜色，不展示已选择的颜色。而是在选择器上方展示已选择的颜色。
尾声
从这个插件的样式设计就可预见，该插件其实不适合用于颜色值的回显，只能作为一个简单的颜色选择器，以上对源码修改的尝试，虽然实现了业务功能，但是后续为了页面美观，还是换用了另一个圆盘插件。
若有不足之处，请不吝赐教喔 ~
