npm 包 vanilla-picker 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 vanilla-picker 使用教程

在前端开发工作中，常常需要使用颜色选择器。这时候可以使用 vanilla-picker 这个 npm 包。vanilla-picker 是一个基于原生 JavaScript 实现的简单易用的颜色选择器插件。

安装 vanilla-picker

安装 vanilla-picker 可以使用 npm，运行以下命令：

--- ------- -------------- ------

使用 vanilla-picker

在项目中引入 vanilla-picker，可以在 HTML 的 body 标签中加入以下代码：

------
  ------------------ -------
  ------ ----------- ------------------------
  ---- ------------------------

  ------- ---------------------------------------------
  --------
    ----- ------ - --- ----------------------------------------------- -
      ------ ------
    ---
    --------------- - --------------- -
      --------------------------------------------------- - -----------------
    -
  ---------
-------

接下来，我们逐步解释代码。

首先，在 body 中加入一个 input 和一个 div。在 script 中引入 vanilla-picker.min.js。然后，创建了一个新的 picker 实例，并指定了 popup 的位置。最后，设置了输入框的值与当前颜色同步。

Picker 的各种参数

创建 picker 实例时可以设置的参数有：

parent - picker 的父元素，默认为 document.body
color - 初始颜色，默认为 #ffffff
alpha - 是否显示透明度选择，默认为 false
alphaRequired - 是否必须设置透明度，默认为 false
popup - 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