微信小程序颜色选择器、拾色器、取色器组件
bao-wecom
微信小程序颜色选择器、拾色器、取色器组件
案例demo
[图片]
使用方法
1. 安装组件
[代码]npm install --save bao-wecom
[代码]
2. 构建 npm
点击开发者工具中的菜单栏:工具 --> 构建 npm
[图片]
3. 颜色选择器使用
在页面的 json 配置文件中添加 bao-wecom-color-picker 自定义组件的配置
[代码]{
"usingComponents": {
"bao-wecom-color-picker": "bao-wecom/colorPicker/index"
}
}
[代码]
WXML 文件中引用 bao-wecom-color-picker
[代码]<bao-wecom-color-picker></bao-wecom-color-picker>
[代码]
bao-wecom-color-picker 的属性介绍如下:
字段名
类型
必填
描述
show
Boolean
是
控制颜色选择器是否显示
color
String
否
设置颜色选择器的颜色,默认为#ff0000 ,仅支持rgb、hex格式
commonColor
String
否
设置常用颜色值,默认为"#000000,#ffffff,#ff0000,#ffa500,#00ff00,#0000ff,#ff00ff,#00ffff,#ffff00,#70db93,#cccccc,#999999" ,仅支持hex格式,最多12个
comfirmText
String
否
设置确定按钮的文字,默认为确定
cancelText
String
否
设置取消按钮的文字,默认为取消
title
String
否
设置标题,默认为请选择
bao-wecom-color-picker 的事件介绍如下:
事件名
描述
confirm
点击确定时触发,返回值{hex: 16进制色值, rgb: rgb色值, hsv: hsv色值}
cancel
点击取消时触发
如果觉得作者不易,打赏一下呗
[图片]