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