小巧美观的取色器：xy-color-picker

html5表单元素input增加了一个颜色类型，就是取色器。这个选择器在windows上的默认效果是这样的：可以说是非常难看，不好用。为了解决这个问题，xy-ui增加了一个新类型的组件xy-color-picker，效果如下：Designreferencechormecolorpicker。视觉上是不是提升了很多？我们来看看具体的使用。推荐查看文档，实时交互功能可以选择基于色调（HSV）模式，支持鼠标滑动和键盘输入选择颜色，可以选择切换颜色显示模式，分别是hex，rgba,hsl,点击左边的圆形按钮，将当前颜色值复制到剪贴板板子可以从底部选择预设颜色值（MatetialDesignColor）。用法很简单npmnpmixy-uicdn使用默认值指定颜色选择器的初始颜色value默认值，这是一个有效的颜色值。类型示例web支持关键字red，blue支持hex(a)#42b983，#42B983BA支持rgb(a)rgb(66,185,131)，rgba(66,185,131,0.73)支持hls(a)hsl(153,47%,49%),hsla(153,47%,49%,0.73)支持hsv(a)hsv(153,47%,49%),hsva(153,47%,49%,0.73)不支持支持cmykcmyk(20%,35%,74%,53%)其中不支持，web支持四种颜色关键字方式，hex(a),rgb(a),hls(a)。value值，颜色颜色设置或返回颜色选择器的value属性值。值是合法的颜色值。默认返回当前格式的颜色值。返回颜色的详细信息颜色，该值可以转换为任意格式的颜色值。//color{h:16.23529411764704s:66.42857142857143v:71.71875a:1toCMYK:f,toHEXA:f,toHSLA:f,toHSVA:f,toRGBA:f,}color.toRGBA().toString()//返回RGBA颜色值方向dir可以通过dir设置颜色悬浮层的方向，默认为bottomleft，取值可以为top,right,bottom,left,topleft,topright,righttop,rightbottom,bottomleft,bottomright,lefttop,左下角。例如，如果设置了dir="topleft"，事件将选择颜色然后按下OK按钮可以触发change回调。其他触发方式colorPicker。onchange=function(ev){//获取值的几种方法/*event:{detail:{value,color:{h:16.23529411764704s:66.42857142857143v:71.71875a:1toCMYK:f,toHEXA:f,toHSLA:f,toHSVA:f,toRGBA:f,}}}*/console.log(this.value);控制台日志（this.color）；控制台日志（ev.target.value）；控制台日志（ev.detail.value）；this.color.toRGBA().toString()//rgba(255,255,255,1)}colorPicker.addEventListener('change',function(ev){console.log(this.value);console.log(this.color);console.log(ev.target.value);console.log(ev.detail.value);this.color.toRGBA().toString()//rgba(255,255,255,1)})其他xy-color-picker内部实现了取消Confirm