⽼样纸，先上效果图：
绿减肥产品>透水混凝土做法demo操作地址：
城市通讯打开这个页⾯之后，在Form中打开ColorPicker颜⾊选择页⾯
先对这个效果图做⼀个简单介绍：
1. 这个组件左边的实例是启⽤了设置透明度alpha值的，⽽右边的禁⽤了，所以是看起来两种不同的效果；
2. 这两个实例通过v-model绑定了同⼀个值，所以在点击确定按钮的时候，两个都产⽣了相应的变化，因为右边的没有启⽤透明度，所
以转化得到的值会⾃动转化为不带透明度的16进制，这个转化的结果是可以设置的，⽀持rgb以及16进制(hex)，默认是16进制;
3. 从上⾄下，第⼀个正⽅形是⽤来选择饱和度（saturation）以及亮度（value），第⼀个七彩的滑条是⽤来选择⾊相（hue），第三个 是记录历史选择的颜⾊，可以点击历史选择的颜⾊快速选中颜⾊；
4. 第⾏是颜⾊输⼊框，输⼊颜⾊，回车之后会更新显⽰输⼊的颜⾊，点击确定按钮这个组件实例会派发input事件，值就是选中的颜⾊；接下来介绍这个组件的实现原理
在实现这个组件的时候，⽹上各种百度⾕歌博客⽹页，⼤多数都是介绍啥啥啥组件怎么⽤，哪个现成
的⽐较好⽤，就没看到那篇博客详细说明了这个东西的实现原理，每个东西是怎么来的，这⾥我研究了⼀番之后，决定将解析过程写下来，避免过⼀段时间就忘了。
1. ⾸先介绍⼀个核⼼概念：HSV颜⾊模型
1） 先上图：
2）在HSV颜⾊模型中，HSV三个字母分别代表⾊调（hue）、饱和度（saturation）、亮度（value），⾸先⾊调的取值范围是0 ~ 360，表⽰0度到360度，对应图中圆锥上⽅彩⾊的度数，0度以及360度都表⽰红⾊，120度表⽰绿⾊，240度表⽰蓝⾊；饱和度的取值范围为0 ~ 100，可以理解为点到彩⾊圆中⼼的距离，观察⼀下上⾯的图，在圆锥彩⾊圆中，圆⼼是⽩⾊的，这时饱和度为0，当
饱和度为100时，颜⾊就是圆最外层的颜⾊，也就是最“饱和”的颜⾊，所以这个饱和度可以理解为在彩⾊圆中的点到彩⾊圆中⼼的距离，从⽴体⾓度来看，就是圆锥体内的点，到圆锥内部中⼼轴的距离；亮度为圆锥体内的点所在的平⾯到圆锥顶点的距离，为0，表⽰亮度为0，这时就是⿊⾊的，如果为最⼤值100，表⽰点在彩⾊圆上；当hsv为0,100,100表⽰为红⾊；
3）看这个图，在圆点上下移动的时候观察value，在圆点左右移动的时候观察saturation：
可以观察到，当saturation越⼩时，越趋近于⽩⾊（饱和度低），当value越⼩时（亮度低），越趋近于⿊⾊，当saturation以及value都为100时，就是当前⾊调的颜⾊；
2. 相关组件罗列（按照实现的顺序）：
精油加工设备1）pl-color-hue-slider（⾊调滑条选择组件，图中七彩横条滑动的组件）；
2）pl-color-sv-picker（饱和度以及亮度选择组件，图中正⽅形元素）；
3）pl-color-alpha-slider（透明度选择组件，本⽂最开始的图中第⼀张图⾊调滑条选择组件下⾯的有透明格⼦的组件）；
4）pl-color（显⽰颜⾊的⼩圆圈组件）；
5）pl-color-history（显⽰历史选择颜⾊的组件，点击可以得到选择的历史颜⾊）；
6）pl-color-picker-panel（整个颜⾊选择⾯板组件）；
3. pl-color-hue-slider没啥技术含量，就是背景⾊是： background: linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff
台卡制作>网站实时监控
50%, #00f 67%, #f0f 83%, red)；然后有个div可以拖拽左右移动，这个左右移动是通过left属性控制的，通过left值与整个滑条可滑动宽度（滑条宽度减去滑块宽度）之间的⽐例（[0,100]）得出[0,360]的度数；
4. pl-color-sv-picker要⽐pl-color-hue-slider要稍微复杂⼀点点，就是横轴left值是饱和度，纵轴top值是100-亮度，然后这个⽩⾊、
⿊⾊以及对应⾊调颜⾊的渐变颜⾊⾯板的原理是有三个div，第⼀个div背景⾊是⾊调⾊，第⼆个div是⽩⾊渐变⾊background: linear-gradient(to right, white, #ffffff00)，从左⾄右，第三个div是⿊⾊渐变⾊background: linear-gradient(to top, black, #ffffff00)，从下⾄上，最后三个div覆盖在⼀起就可以得到这个⿊⽩彩渐变的⾯板；
5. pl-color-alpha-slider透明度组件原理与pl-color-hue-slider原理基本⼀致；
6. 剩下的pl-color-history以及pl-color-picker-panel的实现过程与颜⾊选择器的核⼼原理没啥关系，这⾥就不提了；
因为这个组件⾪属于我个⼈组件库，⽬前组件库不是开源的，所以这个组件的源码不便展⽰。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议