前言
spectrum-colorpicker 是一款使用方便、功能丰富的颜色选择器插件，它支持多种颜色格式、鼠标滚轮选择、拖动选取、色相、亮度、饱和度调整、输入值等等。在现代 web 应用中，颜色选择是一个不可或缺的部分，因此了解和掌握这款插件的使用方法将对前端开发工作大有裨益。
安装
使用 npm 安装 spectrum-colorpicker 只需要运行以下命令：
npm install spectrum-colorpicker
如果你想使用最新版本的 spectrum-colorpicker，可以在 GitHub 上下载最新的 release 包，并将 spectrum-colorpicker.js 和 spectrum-colorpicker.css 文件放到您的项目目录下。
使用
引入库
安装完 spectrum-colorpicker 之后，在需要使用选择器的页面中引入它的 js 和 css 文件：
<link href="path/to/spectrum-colorpicker.css" rel="stylesheet" /> <script src="path/to/spectrum-colorpicker.js"></script>
创建选择器
在 HTML 中创建一个 input 元素，将它的 type 设置为 text，然后将它的 class 设置为 spectrum：
<input type="text" class="spectrum" />
在页面加载完成后运行以下代码，即可将这个 input 变为一个颜色选择器：
$('.spectrum').spectrum();配置选项
spectrum-colorpicker 支持很多可配置的选项，你可以按照你的需求调整它们的值。以下是一些常用的选项：
- color：设置初始颜色。
- showInitial：是否显示初始颜色块。
- showInput：是否显示输入框。
- preferredFormat：首选颜色格式。
- showAlpha：是否显示透明度选项卡。
- allowEmpty：是否允许选择空白颜色。
- move：当颜色变化时的回调函数。
- change：当颜色改变完成时的回调函数。
-- -------------------- ---- -------
-------------------------
------ -------
------------ -----
---------- -----
---------------- ------
---------- -----
----------- ------
----- --------------- -
-------------------------- - ---------------------
--
------- --------------- -
---------------------------- - ---------------------
-
---调用方法
spectrum-colorpicker 提供了一些内置的方法，在需要的时候可以调用它们。
获取和设置颜色
我们可以使用 spectrum() 方法来获取和设置颜色。当不传递参数时，该方法返回当前选择器的颜色。当传递参数时，该方法设置选择器的颜色并返回选择器本身。
// 获取当前颜色
var color = $('.spectrum').spectrum('get');
// 设置颜色
$('.spectrum').spectrum('set', '#00f');获取和设置选项
使用 option() 方法获取和设置选项。当不传递参数时，该方法返回当前选项对象。当传递一个字符串参数时，该方法返回该选项的值。当传递两个参数时，该方法设置该选项的值并返回选择器本身。
// 获取选项对象
var options = $('.spectrum').spectrum('option');
// 获取特定选项的值
var allowEmpty = $('.spectrum').spectrum('option', 'allowEmpty');
// 设置选项值
$('.spectrum').spectrum('option', 'allowEmpty', true);销毁选择器
使用 destroy() 方法销毁选择器。该方法会将选择器还原为普通的文本输入框。
$('.spectrum').spectrum('destroy');示例
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------------- ----------
----- --------------------------------------- ---------------- --
-------
------
------ ----------- ---------------- --
------- -----------------------------------------------
--------
-------------------------
------ -------
---------- -----
---------------- ------
---------- -----
----------- ------
----- --------------- -
-------------------------- - ---------------------
--
------- --------------- -
---------------------------- - ---------------------
-
---
---------
-------
-------结语
spectrum-colorpicker 是一款非常优秀的颜色选择器插件。掌握它的使用方法，将为前端开发者提供方便、快捷的工具，提高开发效率。希望这篇教程能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/185418