小而美的顏色選擇器：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~。