小而美的颜色选择器：xy-color-picker

html5表单元素input新增了一个color类型，也就是颜色选择器。

<input type="color">
复制代码

该选择器在windows上的默认效果以下：

能够说很是难看而且难用了。

为了解决这个问题，xy-ui新增了一类组件xy-color-picker，效果以下：

设计参考chorme颜色选择器。

是否是从视觉上就提高了一大截呢

下面来看看具体使用。

建议查看文档，能够实时交互

功能特性

• 基于色相（HSV）模式选择

• 支持鼠标滑动和键盘输入选择颜色

• 能够选择切换颜色显示模式，分别为hex、rgba、hsl

• 点击左边圆形按钮能够复制当前颜色值到剪贴板

• 能够从下方选择预设颜色值（Matetial Design Color）

使用方式

使用方式很简单

npm i xy-ui
复制代码

或者直接从github拷贝源码。

<!-- 引入 -->
<script type="module"> import './node_modules/xy-ui/components/xy-color-picker.js'; </script>
<!-- 使用 -->
<xy-color-picker></xy-color-picker>
复制代码

默认值defaultvalue

能够给颜色选择器指定一个初始颜色值defaultvalue，取值为合法的颜色值。

类型	示例	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)	不支持
cmyk	cmyk(20%, 35%, 74%, 53%)	不支持

其中，web支持颜色关键字、hex(a)、rgb(a)、hls(a)四种方式。

<xy-color-picker defaultvalue="rgb(66, 185, 131)"></xy-color-picker>
复制代码

值value、颜色color

设置或返回颜色选择器的value属性值。值为合法的颜色值。默认返回当前格式下的颜色值。

返回颜色的详细信息color，能够将值转换成任意格式的颜色值。

//color
{
    h: 16.23529411764704
    s: 66.42857142857143
    v: 71.71875
    a: 1
    toCMYK: 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、leftbottom。

好比设置dir="topleft"，则

<xy-color-picker defaultvalue="rgb(66, 185, 131)" dir="topleft"></xy-color-picker>
复制代码

事件

当选好颜色后，按肯定按钮能够触发change回调。

<xy-color-picker defaultvalue="rgb(66, 185, 131)" onchange="XyMessage.info('当前value: '+this.value)"></xy-color-picker>
复制代码

其余触发方式

colorPicker.onchange = function(ev){
    //获取value的几种方式
    /* event:{ detail:{ value, color:{ h: 16.23529411764704 s: 66.42857142857143 v: 71.71875 a: 1 toCMYK: f, toHEXA: f, toHSLA: f, toHSVA:f, toRGBA: f, } } } */
    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)
}

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内部基于xy-popover和xy-color-pane实现。

<xy-popover >
    <xy-button class="color-btn"></xy-button>
    <xy-popcon>
        <xy-color-pane id="color-pane"></xy-color-pane>
        <div class="pop-footer">
            <xy-button id="btn-cancel">取消</xy-button>
            <xy-button type="primary" id="btn-submit">确认</xy-button>
        </div>
    </xy-popcon>
</xy-popover>
复制代码

其中，xy-color-pane为颜色选择面板，可独立使用。

<xy-color-pane></xy-color-pane>
复制代码

事件和属性与xy-color-picker一致。

colorPane.value = 'orangered';
colorPane.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的API很简单，大多数状况下onchange足够使用，若是想有定制的需求能够把xy-color-pane独立出来使用。

xy-color-picker是一个原生web组件，不限制于框架，可直接使用。若是想使用其余相似的组件，可关注xy-ui，聚集了其余各种常见交互组件，欢迎star~。