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