18

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

<input type="color">

该选择器在windows上的默认效果如下:

clipboard.png

可以说非常难看并且难用了。

为了解决这个问题,xy-ui新增了一类组件xy-color-picker,效果如下:

clipboard.png

设计参考chorme颜色选择器。

是不是从视觉上就提升了一大截呢

下面来看看具体使用。

建议查看文档,可以实时交互

功能特性

clipboard.png

  • 基于色相(HSV)模式选择
  • 支持鼠标滑动和键盘输入选择颜色
  • 可以选择切换颜色显示模式,分别为hexrgbahsl
  • 点击左边圆形按钮可以复制当前颜色值到剪贴板
  • 可以从下方选择预设颜色值(Matetial Design Color)

使用方式

使用方式很简单

  • npm
npm i xy-ui
  • cdn
<script type="module" src="https://unpkg.com/xy-ui/components/xy-color-picker.js"></script>

<!--或者-->

<script type="module">
    import 'https://unpkg.com/xy-ui/components/xy-color-picker.js'
</script>
  • 或者直接从github拷贝源码。
<script type="module" src='./node_modules/xy-ui/components/xy-color-picker.js'></script>
<!--或者-->
<script type="module">
    import './node_modules/xy-ui/components/xy-color-picker.js';
</script>

使用

<xy-color-picker></xy-color-picker>

默认值defaultvalue

可以给颜色选择器指定一个初始颜色值defaultvalue,取值为合法的颜色值。

类型 示例 web支持
关键字 redblue 支持
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)四种方式。

clipboard.png

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

value、颜色color

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

返回颜色的详细信息color,可以将值转换成任意格式的颜色值。

clipboard.png

//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,可以取值toprightbottomlefttoplefttoprightrighttoprightbottombottomleftbottomrightlefttopleftbottom

比如设置dir="topleft",则

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

clipboard.png

事件

当选好颜色后,按确定按钮可以触发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)
})

clipboard.png

其他

xy-color-picker内部基于xy-popoverxy-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>

clipboard.png

事件和属性与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-pickerAPI很简单,大多数情况下onchange足够使用,如果想有定制的需求可以把xy-color-pane独立出来使用。

xy-color-picker是一个原生web组件,不限制于框架,可直接使用。如果想使用其他类似的组件,可关注xy-ui,汇集了其他各类常见交互组件,欢迎star~。

clipboard.png


XboxYan
18.1k 声望14.1k 粉丝