介绍
@tadevel/paper-lazy-swatch-picker 是一款基于 Polymer 和 Material Design Lite 的延迟加载颜色选择器组件，适用于前端开发领域。它支持屏幕阅读器和键盘导航，同时也具备颜色盲人士友好性。对于希望增强网站颜色选择体验的开发者可以使用这个组件。
安装
在使用 @tadevel/paper-lazy-swatch-picker 前你需要先安装 Polymer 和 Material Design Lite 依赖，然后才能进行进一步的使用操作。
安装 @tadevel/paper-lazy-swatch-picker 可以使用以下命令：
npm install @tadevel/paper-lazy-swatch-picker
使用
在 Polymer 的 dom-module 中添加该组件
-- -------------------- ---- -------
----------- ------------------
----------
-----------------------------------------------------
-----------
--------
---------
--- ---------------
-- ---
---
---------
-------------注册等待颜色
你可以通过 paper-lazy-swatch-picker 标记等待的颜色：
// ... <paper-lazy-swatch-picker> <div class="waiting-color" data-color="#00ff00"></div> <div class="waiting-color" data-color="#0000ff"></div> </paper-lazy-swatch-picker> // ...
获取颜色
你可以使用如下方法告诉你选中的颜色：
let picker = document.querySelector('paper-lazy-swatch-picker');
let color = picker.selectedColor;你也可以监听 selected-color-changed 事件来获取颜色改变通知。
示例代码
-- -------------------- ---- -------
----------- ------------------
----------
--------------------------
---- --------------------- ---------------------------
---- --------------------- ---------------------------
---------------------------
---------------------------------
-----------
--------
---------
--- ---------------
----------- -
-------------- -
----- -------
------ ---------
-
--
------ ---------- -
--- ------ - -----------------------------------------------
------------------------------------------------- --------------- -
------------------ - -------------------
---
-
---
---------
-------------结语
到此为止，你已经了解了如何使用 @tadevel/paper-lazy-swatch-picker 实现一个简单的颜色选择器组件，希望本篇文章能够对你有所帮助，提高你的编码水平。如果你还有其它高质量的 npm 包使用教程，请及时与我分享，让我们共同推动前端技术的发展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067354890c4f7277583a02