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

Kylin_Mountain 发布于2019-08-26 10:39 / 874人阅读

摘要：表单元素新增了一个类型，也就是颜色选择器。或者使用默认值可以给颜色选择器指定一个初始颜色值，取值为合法的颜色值。值颜色设置或返回颜色选择器的属性值。默认返回当前格式下的颜色值。

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

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

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

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

设计参考chorme颜色选择器。

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

下面来看看具体使用。

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

功能特性

基于色相（HSV）模式选择

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

可以选择切换颜色显示模式，分别为hex、rgba、hsl

点击左边圆形按钮可以复制当前颜色值到剪贴板

可以从下方选择预设颜色值（Matetial Design Color）

使用方式

使用方式很简单

npm

npm i xy-ui

cdn

或者直接从github拷贝源码。

使用

默认值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)四种方式。

值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"，则

事件

当选好颜色后，按确定按钮可以触发change回调。

其他触发方式

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-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~。

GPU云服务器云服务器 extjs颜色选择器颜色配置器选择颜色js Android颜色配置器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106554.html

window上小而美的软件(推荐度按排名)

摘要：更好用更强大的笔记本本地翻译神器解压缩软件程序文件快捷神器搜索本地文件神器像浏览器一样打开文件夹记录每次复制内容黏贴时可选择复制黏贴神器程序文件快捷神器火萤酱程序文件快捷神器多窗口资源管理器干净的射手播放器网络监控控件录屏软件录屏软件更 Notepad++ 更好用更强大的笔记本 QTranslate 本地翻译神器 7-zip 解压缩软件 Wox 程序/文件/快捷神器 1! Ever...

Alfred 2019-06-28 10:34 评论0 收藏0
Fre：又一个小而美的前端MVVM框架

摘要：，大家好，好久不贱呢最近因为看了一些的小说，整个人都比较致郁就在昨天，我用了一天的时间写了，又一个小而美的前端框架可能你觉得，有了和，没必要再写一个了我觉得我还是想想办法寻找一下它的存在感吧先看的组件化方案最先看到的应该是。 halo，大家好，好久不贱呢！最近因为看了一些 be 的小说，整个人都比较致郁::>__+ {state.count--}}>- ...

LittleLiByte 2019-08-02 16:07 评论0 收藏0
Fre：又一个小而美的前端MVVM框架

摘要：，大家好，好久不贱呢最近因为看了一些的小说，整个人都比较致郁就在昨天，我用了一天的时间写了，又一个小而美的前端框架可能你觉得，有了和，没必要再写一个了我觉得我还是想想办法寻找一下它的存在感吧先看的组件化方案最先看到的应该是。 halo，大家好，好久不贱呢！最近因为看了一些 be 的小说，整个人都比较致郁::>__+ {state.count--}}>- ...

nanfeiyan 2019-08-23 14:06 评论0 收藏0
使用 ale.js 制作一个小而美的表格编辑器（1）

摘要：如果你并没有学习过的语法结构，请前往访问教程接下来，我们在定义组件时设置一个属性，并返回一个链接到属性内的函数的值之后我们需要在属性里面写上函数。今天来教大家如何使用 ale.js 制作一个小而美的表格编辑器，首先先上 gif： showImg(https://oscimg.oschina.net/oscnet/9cd352e5b3b5eca86b3b8832330899bfac5....

pingink 2019-08-23 14:44 评论0 收藏0