在前端开发中，经常需要进行颜色选择操作。@jworkshop/colorpicker 是一个非常实用的 npm 包，提供了一个交互式的颜色选择器，可以轻松地进行颜色选择操作。本文将介绍如何使用 @jworkshop/colorpicker。
安装
使用 npm 进行安装：
npm install @jworkshop/colorpicker
基本用法
-- -------------------- ---- -------
---- -- ----------- -- ---
----- ---------------- ----------------------------------------------------------------------
---- -- ----------- -- ---
------- -----------------------------------------------------------------------------
---- ------- ---
------ ----------- ---------------------
---- -------- ---
--------
--- ----- - ----------------------------------------
--- ----------- - --- --------------------------
-------------------- - -------- -- -
--------------------- ----- ---- -------------------
--
---------API
构造函数 colorPicker(element: HTMLElement, options?: ColorPickerOptions)
element: 必填项，要添加颜色选择器的input元素。options: 可选项，颜色选择器的配置项，默认值如下：
interface ColorPickerOptions {
isSimpleMode?: boolean; // 是否为简单模式，默认值为 false。
inputFormat?: 'hex' | 'rgb' | 'hsl'; // 颜色的输入格式，默认值为 hex。
previewElement?: HTMLElement; // 当前选择颜色的预览元素，默认值为 null。
palette? : string[]; // 预设颜色板，默认值为 [@jworkshop/colorpicker] 官网提供的颜色板。
}colorPicker.color: string
选中的颜色值，类型为字符串。
colorPicker.onchange()
颜色选择器值改变后的回调函数。
高级用法
在实际开发过程中，我们会在各种不同的场景下使用颜色选择器，例如：简单模式、非 input 输入框、预设颜色等。下面是一些常用的高级使用示例：
简单模式
简单模式下，颜色选择器不会显示调色板，只显示简短的输入框。
-- -------------------- ---- -------
---- ------- ---
------ ----------- ----------------------------
---- -------- ---
--------
--- ----- - -----------------------------------------------
--- ----------- - --- ------------------------- - ------------- ---- ---
-------------------- - -------- -- -
--------------------- ----- ---- -------------------
--
---------自定义预览元素
默认情况下，当颜色选择器值发生变化时，会将当前选中的颜色值显示在 input 输入框的 value 属性中。不过，我们也可以将选中的颜色显示在任意一个指定的元素上。
-- -------------------- ---- -------
---- ------- ---
------ ----------- --------------------------- ----------------------
---- ----------------------
---- -------- ---
--------
--- ----- - -----------------------------------------------
--- ------- - -----------------------------------
--- ----------- - --- ------------------------- - --------------- ------- ---
-------------------- - -------- -- -
--------------------- ----- ---- -------------------
--
---------使用预设颜色板
-- -------------------- ---- -------
---- ------- ---
------ ----------- ----------------------------
---- ----------------------
---- -------- ---
--------
--- ----- - -----------------------------------------------
--- ------- - -----------------------------------
--- ----------- - --- ------------------------- - -------- ------- ------- --------- --------------- ------- ---
-------------------- - -------- -- -
--------------------- ----- ---- -------------------
--
---------直接使用 DOM 元素
不一定非要使用 input 元素，通过使用自定义 DOM 元素也可以实现颜色选择器，这种方式可以实现更复杂的 UX/UI。
-- -------------------- ---- -------
---- --------- ---
---- ---------------------
---- ----------------------
---- -------- ---
--------
--- ------ - ----------------------------------
--- ------- - -----------------------------------
--- ----------- - --- -------------------------- - --------------- ------- ---
-------------------- - ---------- -
------------------------------- ------- ------------------ ---------- -------------------------
--
---------结语
@jworkshop/colorpicker 是一个非常实用且易用的 npm 包，可以满足各种不同场景下的需求。在开发过程中，借助 @jworkshop/colorpicker，可以提升开发体验和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc5967216659e244394