在前端开发工作中，常常需要使用颜色选择器。这时候可以使用 vanilla-picker 这个 npm 包。vanilla-picker 是一个基于原生 JavaScript 实现的简单易用的颜色选择器插件。
安装 vanilla-picker
安装 vanilla-picker 可以使用 npm，运行以下命令：
npm install vanilla-picker --save
使用 vanilla-picker
在项目中引入 vanilla-picker，可以在 HTML 的 body 标签中加入以下代码：
-- -------------------- ---- ------- ------ ------------------ ------- ------ ----------- ------------------------ ---- ------------------------ ------- --------------------------------------------- -------- ----- ------ - --- ----------------------------------------------- - ------ ------ --- --------------- - --------------- - --------------------------------------------------- - ----------------- - --------- -------展开代码
接下来，我们逐步解释代码。
首先，在 body 中加入一个 input 和一个 div。在 script 中引入 vanilla-picker.min.js。然后，创建了一个新的 picker 实例，并指定了 popup 的位置。最后，设置了输入框的值与当前颜色同步。
Picker 的各种参数
创建 picker 实例时可以设置的参数有：
parent- picker 的父元素，默认为document.bodycolor- 初始颜色，默认为#ffffffalpha- 是否显示透明度选择，默认为falsealphaRequired- 是否必须设置透明度，默认为falsepopup- popup 的位置，默认为'right'onDone- 完成选择后的回调函数
接下来我们知道这些参数的作用。
parent
该选项指定了 picker 的父元素。如果不指定，picker 将被添加到 document.body 中。
color
该选项用于设置 picker 的初始颜色。可以使用以下格式：
#rrggbb- 使用 16 进制表示法指定颜色#rgb- 简写的 16 进制表示法rgb(r, g, b)- RGB 表示法rgba(r, g, b, a)- RGBA 表示法
alpha
该选项指定是否显示透明度选择框。默认情况下，不显示透明度选择框。
alphaRequired
该选项指定透明度是必须的。如果未设置，picker 会自动选择透明度为 1。
popup
该选项指定了 popup 的方向。可选值为 'right', 'left', 'top', 'bottom' 中的一种。默认为 'right'。
onDone
该选项指定了选择完成后的回调函数。回调函数的第一个参数是选择的颜色。
Picker 的方法
picker 提供了以下方法：
getColor()
返回当前 picker 的颜色对象。
setColor(color)
设置 picker 的颜色。color 参数可以是以下格式：
#rrggbb- 使用 16 进制表示法指定颜色#rgb- 简写的 16 进制表示法rgb(r, g, b)- RGB 表示法rgba(r, g, b, a)- RGBA 表示法{ r: 0, g: 0, b: 0 }- 对象表示法，使用 RGB 颜色值（0-255）{ r: 0, g: 0, b: 0, a: 1 }- 对象表示法，使用 RGBA 颜色值（0-255）
setColor 方法还可以传递一个选项对象，用于指定是否显示动画。
isOpen()
检查 picker 是否处于打开状态。
open()
打开 picker。
close()
关闭 picker。
示例代码
为了更好的理解以上内容，以下是基于 vanilla-picker 的示例代码。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------------------- ---------- ----- ---------------- ------------------------------------------------------------------------------------- ------- ------ ------------------ ------- ------ ----------- ------------------------ ---- ------------------------ ------- -------------------------------------------------------------------------------------------- -------- ----- ------ - --- ----------------------------------------------- - ------ ------ --- --------------- - --------------- - --------------------------------------------------- - ----------------- - --------- ------- -------展开代码
打开该 HTML 文件后，可以看到一个颜色选择器，点击该选择器后就可以选择颜色。
总结
在这篇文章中，我们介绍了如何使用 vanilla-picker 这个 npm 包。我们了解了如何安装并使用 vanilla-picker，以及其中的各种参数和方法。vanilla-picker 可以方便的在前端项目中使用，它简单易用，适合于轻量级开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/79386
