在前端开发中,经常需要使用到颜色选择器,而 npm 包 mb-color-picker 是一款功能强大、易于使用的颜色选择器。下面就介绍一下如何使用它。
安装
我们可以通过 npm 安装 mb-color-picker:
npm install mb-color-picker --save
使用
在使用之前,我们需要在 HTML 页面中添加 mb-color-picker 的 JS 和 CSS 文件:
<link rel="stylesheet" href="path/to/mb-color-picker.min.css"> <script src="path/to/mb-color-picker.min.js"></script>
添加了动态 CSS 和 JS 资源,下步是初始化和创建 color-picker。
-- -------------------- ---- ------- ------ ------------- ---- ------------------ ----- --------------- - ---------------------------------------- ----- ------------ - ---------- ----- -------- - --- --------------- ------ ------------- ------- ---------------- ------ ---- ------- ---- --- --------------------- ------- -- - ---------------------- ------- ---
以上示例代码中,我们通过导入 mb-color-picker 的 JS 文件创建了一个颜色选择器。并设置了初始颜色、容器元素、高度和宽度。
调用 on 方法,在 change 事件触发后打印出选中的颜色值。
在不需要时,要记得销毁 color-picker。
mbPicker.destroy();
参数
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 事件。`` 这个事件返回原始色值。
mbPicker.on('change', (color) => { console.log('选中的颜色是:', color); });
总结
mb-color-picker 是一款非常优秀的颜色选择器,简单易用。同时提供全面的 API 帮助文档。希望在开发中对大家有帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005562981e8991b448d314f