# 使用指南
在 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" |
部分功能需扫码预览才能正常显示。