npm 包 mb-color-picker 使用教程

阅读时长 3 分钟读完

在前端开发中,经常需要使用到颜色选择器,而 npm 包 mb-color-picker 是一款功能强大、易于使用的颜色选择器。下面就介绍一下如何使用它。

安装

我们可以通过 npm 安装 mb-color-picker:

使用

在使用之前,我们需要在 HTML 页面中添加 mb-color-picker 的 JS 和 CSS 文件:

添加了动态 CSS 和 JS 资源,下步是初始化和创建 color-picker。

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

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

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

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

以上示例代码中,我们通过导入 mb-color-picker 的 JS 文件创建了一个颜色选择器。并设置了初始颜色、容器元素、高度和宽度。

调用 on 方法,在 change 事件触发后打印出选中的颜色值。

在不需要时,要记得销毁 color-picker。

参数

mb-color-picker 提供了多个参数供我们设置。下面就对它们进行介绍:

1. color

type:string

default:'#fff'

指定初始值颜色。

2. target

type:HTMLElement

default:document.body

设置 color-picker 容器。

3. width

type:number | string

default:200

设置 color-picker 的宽度。

4. height

type:number | string

default:200

设置 color-picker 的高度。

5. alphaChannel

type:boolean

default:true

是否开启 alpha 通道,即颜色的透明度。

6. preset

type:Array

default:null

设置颜色选择器支持的颜色列表。

7. labels

type:Object

default:{ red: 'R', green: 'G', blue: 'B', alpha: 'A' }

定义红、绿、蓝和透明度通道的标签值。

事件

除了初始化参数之外,mb-color-picker 提供了一些常用事件。

1. change

当颜色发生变化时,自动触发 change 事件。`` 这个事件返回原始色值。

总结

mb-color-picker 是一款非常优秀的颜色选择器,简单易用。同时提供全面的 API 帮助文档。希望在开发中对大家有帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005562981e8991b448d314f

纠错
反馈