小而美的顏色選擇器：xy-color-picker

Kylin_Mountain 發(fā)布于2019-08-26 10:39 / 923人閱讀

摘要：表單元素新增了一個類型，也就是顏色選擇器。或者使用默認值可以給顏色選擇器指定一個初始顏色值，取值為合法的顏色值。值顏色設置或返回顏色選擇器的屬性值。默認返回當前格式下的顏色值。

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"，則

事件

當選好顏色后，按確定按鈕可以觸發(fā)change回調。

其他觸發(fā)方式

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實現(xiàn)。

其中，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很簡單，大多數(shù)情況下onchange足夠使用，如果想有定制的需求可以把xy-color-pane獨立出來使用。

xy-color-picker是一個原生web組件，不限制于框架，可直接使用。如果想使用其他類似的組件，可關注xy-ui，匯集了其他各類常見交互組件，歡迎star~。

云服務器 GPU云服務器 extjs顏色選擇器顏色配置器選擇顏色js Android顏色配置器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106554.html

window上小而美的軟件(推薦度按排名)

摘要：更好用更強大的筆記本本地翻譯神器解壓縮軟件程序文件快捷神器搜索本地文件神器像瀏覽器一樣打開文件夾記錄每次復制內容黏貼時可選擇復制黏貼神器程序文件快捷神器火螢醬程序文件快捷神器多窗口資源管理器干凈的射手播放器網絡監(jiān)控控件錄屏軟件錄屏軟件更 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）

摘要：如果你并沒有學習過的語法結構，請前往訪問教程接下來，我們在定義組件時設置一個屬性，并返回一個鏈接到屬性內的函數(shù)的值之后我們需要在屬性里面寫上函數(shù)。今天來教大家如何使用 ale.js 制作一個小而美的表格編輯器，首先先上 gif： showImg(https://oscimg.oschina.net/oscnet/9cd352e5b3b5eca86b3b8832330899bfac5....

pingink 2019-08-23 14:44 評論0 收藏0