评论

微信小程序颜色选择器、拾色器、取色器组件

微信小程序颜色选择器、拾色器、取色器组件

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 点击取消时触发

如果觉得作者不易,打赏一下呗

最后一次编辑于  10-30  
点赞 5
收藏
评论

5 个评论

  • 云彩上的小动车
    云彩上的小动车
    11-05

    楼主 可以适配skyline模式下的嘛

    11-05
    赞同
    回复
  • Cookie
    Cookie
    08-13

    你好 confirm 方法怎么使用的 绑定了方法 点击没效果

    08-13
    赞同
    回复 1
    • 鲍志伟
      鲍志伟
      08-13
      bindconfirm
      08-13
      回复
  • Cookie
    Cookie
    08-13

    你好 confirm 方法怎么使用的 绑定了方法 点击没效果

    08-13
    赞同
    回复
  • 石磊
    石磊
    08-11

    就算要登录,也得给你点个赞

    08-11
    赞同
    回复 1
    • Cookie
      Cookie
      08-13
      你好 confirm 方法怎么使用的 绑定了方法 点击没效果
      08-13
      回复
  • 9 4 5
    9 4 5
    06-24

    您好楼主!为什么构建不了报错了


    06-24
    赞同
    回复 2
    • 鲍志伟
      鲍志伟
      07-04
      报啥错了
      07-04
      回复
    • Cookie
      Cookie
      08-13
      你好 confirm 方法怎么使用的 绑定了方法 点击没效果
      08-13
      回复
登录 后发表内容