- N +

芙蓉镇,物联网是什么-ope体育app ios_opebet体育官网app_ope体育最新app

原标题:芙蓉镇,物联网是什么-ope体育app ios_opebet体育官网app_ope体育最新app

导读:

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

文章目录 [+]

锦纶丝袜

内容来历王一碗小笨笨:SegmentFault专栏 - XboxYan前端工作站

作者:XboxYan

收拾修改:SegmentFault

html5表单元素input新增了一个color类型,也便是色彩挑选器。

<inputtype="color>

该挑选器在windows上的默许作用如下:

能够说十分丑陋而且难用了。

为了处理这个问题,xy-ui新增了一类组件xy-color-picker,作用如下:

规划参阅chorme色彩挑选器。

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

下面来看看详细运用。

功用特性

  • 根据色相(HSV)形式挑选

  • 支撑鼠标滑动和键盘输入挑选色彩

  • 蒋新瑶
  • 能够挑选切换色彩显现形式,分别为hex、rgba、hsl

  • 点击左面圆形按钮能够仿制当时色彩值到剪贴板

  • 能够从下方挑选预设色彩值(Matetial Design Color)

根据色相(HSV)形式挑选

支撑鼠标滑动和键盘输入挑选色彩

能够挑选切换色彩显现形式,分别为hex、rgba、hsl

点击左面圆形按钮能够仿制当时芙蓉镇,物联网是什么-ope体育app ios_opebet体育官网app_ope体育最新app色彩值到剪贴板

能够从下方挑选预设色彩值(Mateti芙蓉镇,物联网是什么-ope体育app ios_opebet体育官网app_ope体育最新appal Design Color)

运用方法

运用方法很简单:

  • npm

npmi xy-ui

  • cdn

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

<!--或许-->

<type="module">

import'https://unpkg.com/xy-ui/components/xy-color-picker.js'

</>

  • 或许直接从github复制源码。

<type="module"src='./node_modules/xy-ui/components/xy-color-picker.js'></>

<!--或许-->

<type="module">

import'./node_modules/xy-ui/component三个小女子s/xy-color-picker.js';

</>

  • 运用

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

默许值 defaultvalue

能够给色彩挑选器指定一个初始色彩值defaultvalue,取值为合法的色彩值。

其间,web支陶喆丧子持色彩关键字、hex(a) 、rgb(a) 、hls(a) 四种方法。

<xy-color-pickerdefaultv捏奶芙蓉镇,物联网是什么-ope体育app ios_opebet体育官网app_ope体育最新appalue="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-pickerdefaultvalue="rgb(6芙蓉镇,物联网是什么-ope体育app ios_opebet体育官网app_ope体育最新app6, 185, 131)"dir="topleft"></xy-color-picker>

事情

当选好色彩后,按承认按钮能够触发change回调。

<xy-color-pickerdefaultvalue="rgb(66, 185, 131)"onchange="XyMessage.i台州博洋鞋业有限公司nfo('当时value: '+this.value)"></xy-color-picker>

其他触发方法

colorPicker.onchange = function(ev){

//获取value的几种方法

/*

event:{

detail:{

value,

color:{

h: 16.23529411764704

s: 66.4285芙蓉镇,物联网是什么-ope体育app ios_opebet体育官网app_ope体育最新app7142857143

v: 71.71875

a: 1

toCMYK: f,

toHEXA: f,

toHSLA: f,

toHSVA:f,

toRGBA: f,

}

}

}

*/

consolethis.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( 'c李家宝hange', function(ev){

console.log( this.value);

console.log( this.color);

console.log(ev.target.value);

co芙蓉镇,物联网是什么-ope体育app ios_opebet体育官网app_ope体育最新appnsole.log(ev.detail.value);

this.color.toRGBA.toString //rgba(255,255,255,1)

})

其他

xy-color-picker内部根据xy-popover和xy-color-pane完成。

<xy-popover>

<xy-buttonclass="color-btn"></xy-button>

<xy-popcon>

<xy-color-paneid="color-pane">&l少女之夜t;/xy-colorpv990-pane>

<divclass="pop-footer">

<xy-buttonid="btn-c沈相奵ancel">撤销 </古筝简笔画xy-button>

<xy-b高辣肉uttontype="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)庆丰军{

consolethis.value);

console.log( this.color);

console.log(ev.target.value);

console.log(ev.detail.value);

this芙蓉镇,物联网是什么-ope体育app ios_opebet体育官网app_ope体育最新app.color.toRGBA.toString //rgba(255,255,255,1)

})

小结

其实关于xy-color-picker的API很简单,大多数情况下onchange满足运用,假如想有定制的需求能够把xy-color-pane独立出来运用。

xy-color-picker是一个原生web组件,不约束于结构,可直接运用。

)

有好的文章希望我们帮助分享和推广,猛戳这里我要投稿

返回列表
上一篇:
下一篇: