# 使用指南

在 Taro 文件中引入组件

// 按需引入需要在 app.scss 中引入对应样式 button.scss
import { ClButton } from "mp-colorui";

# 一般用法

# 参数说明

# Button 参数

参数 说明 类型 可选值 默认值
shape 按钮形状设置 string round,radius radius
size 按钮大小设置 string small,normal,large normal
bgColor 按钮背景色设置 string 参考文档 默认色 blue
plain 镂空设置 boolean true,false false
plainSize 镂空边框粗细设置 string default,bold default
shadow 按钮阴影设置 boolean true,false true
disabled 是否禁用 boolean true,false false
loading 显示加载图标 boolean true,false false
text 按钮文字(同直接在标签里写) string - -
long 是否为长按钮 boolean - false
openType 开放能力 string contact,getUserInfo,
getPhoneNumber,
openSetting,feedback,
getRealnameAuthInfo,
share,launchApp
-
sessionFrom 会话来源,生效时机:open-type="contact" string - -
sendMessageTitle 会话内消息卡片标题,生效时机:open-type="contact" string - -
sendMessagePath 会话内消息卡片点击跳转小程序路径,生效时机:open-type="contact" string - 当前标题
sendMessageImg 会话内消息卡片图片,生效时机:open-type="contact" string - 截图
showMessageCard 显示会话内消息卡片,生效时机:open-type="contact" boolean - false
scope 支付宝小程序 scope,生效时机:open-type="getAuthorize" string userInfo,phoneNumber -
lang 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。生效时机: open-type="getUserInfo" string zh_CN,zh_TW,en -
customData 自定义数据源,格式为 { "data-value": value } object - {}

# Button 事件

事件名称 说明 返回参数
onClick 点击按钮时触发 event 对象
onGetUserInfo open-type 为 getUserInfo 时触发,参考微信 button 文档 event 对象
onContact open-type 为 contact 时触发,参考微信 button 文档 event 对象
onGetPhoneNumber open-type 为 getPhoneNumber 时触发,参考微信 button 文档 event 对象
onError 参考微信 button 文档 event 对象
onOpenSetting open-type 为 openSetting 时触发,参考微信 button 文档 event 对象
onGetRealnameAuthInfo open-type 为 getRealnameAuthInfo 时触发,参考参考微信 button 文档 event 对象
onGetAuthorize 支付宝获取会员基础信息授权回调,生效时机:open-type="getAuthorize"

部分功能需扫码预览才能正常显示。

H5及小程序二维码
上次更新: 6/14/2020, 10:55:18 AM