暗黑模式
Button 按钮
预览
01:38
组件名：rice-button
该组件在小程序端是基于原生的 button 组件为基础进行二次封装的，支持小程序的开放能力
平台兼容性
uni-app x
| Android | iOS | 鸿蒙Next | 微信小程序 | h5 |
|---|---|---|---|---|
| √ | √ | √ | √ | √ |
按钮类型
按钮支持 primary success warning error info default 六种类型，默认为 default。类型通过 type 属性进行定义。文字内容通过 text 传入
vue
<rice-button type="primary" text="主要按钮"></rice-button>
<rice-button type="success" text="成功按钮"></rice-button>
<rice-button type="warning" text="警告按钮"></rice-button>
<rice-button type="error" text="危险按钮"></rice-button>
<rice-button type="info" text="信息按钮"></rice-button>
<rice-button text="默认按钮"></rice-button>朴素带浅色背景的按钮
通过 plain-fill 属性可以将按钮设置为朴素带浅色背景的按钮
vue
<rice-button type="primary" plain-fill text="主要按钮"></rice-button>
<rice-button type="success" plain-fill text="成功按钮"></rice-button>
<rice-button type="warning" plain-fill text="警告按钮"></rice-button>
<rice-button type="error" plain-fill text="危险按钮"></rice-button>朴素按钮
通过 plain 属性可以设置为朴素按钮，此时文字的颜色为按钮的颜色，按钮的背景色为透明。
vue
<rice-button type="primary" plain text="主要按钮"></rice-button>
<rice-button type="success" plain text="成功按钮"></rice-button>
<rice-button type="warning" plain text="警告按钮"></rice-button>
<rice-button type="error" plain text="危险按钮"></rice-button>禁用状态
通过 disabled 属性可以禁用按钮，此时点击事件将失效。
vue
<rice-button type="primary" text="禁用状态" disabled></rice-button>
<rice-button type="success" text="禁用状态" disabled></rice-button>加载状态
通过 loading 属性可以把按钮设置为加载中，此时点击事件将失效。
vue
<rice-button type="primary" loading></rice-button>
<rice-button type="success" loading loading-mode="semicircle" text="加载中…"></rice-button>按钮形状
通过 shape 属性可以设置按钮的形状。
vue
<rice-button type="primary" shape="square" text="方形按钮"></rice-button>
<rice-button type="success" text="圆形按钮" shape="round"></rice-button>图标按钮
通过 icon 属性可以设置按钮的图标。
vue
<rice-button type="primary" icon="plus"></rice-button>
<rice-button type="success" icon="star" text="按钮图标"></rice-button>按钮尺寸
通过 size 属性可以设置按钮的尺寸大小。当然也可以通过 width 和 height 自定义按钮的宽高。
vue
<rice-button type="primary" size="large" text="大号按钮"></rice-button>
<rice-button type="primary" text="普通按钮"></rice-button>
<rice-button type="primary" size="small" text="小型按钮"></rice-button>
<rice-button type="primary" size="mini" text="迷你按钮"></rice-button>自定义颜色
通过 color 属性可以自定义按钮的颜色，支持渐变色。
vue
<rice-button color="#8b60ef" text="紫 色"></rice-button>
<rice-button color="#8b60ef" text="紫色朴素" plain-fill></rice-button>
<rice-button color="linear-gradient(to right, rgb(255, 140, 8), rgb(238, 10, 36))" text="渐变色"></rice-button>小程序开放能力
vue
<rice-button type="primary" open-type="contact" text="打开客服会话"></rice-button>
<rice-button type="primary" open-type="share" text="分享"></rice-button>
<rice-button type="primary" open-type="getPhoneNumber" text="手机号快速验证" @getphonenumber="getphonenumber" />
<rice-button type="primary" open-type="feedback" text="意见反馈"></rice-button>
<rice-button type="primary" open-type="openSetting" text="打开授权设置页"></rice-button>
<rice-button type="primary" open-type="chooseAvatar" text="获取头像" @chooseavatar="chooseavatar"></rice-button>API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 类型, 可选 primary success warning error info default | string | default |
| size | 尺寸，可选 large small mini | string | - |
| text | 按钮文字 | string | - |
| textColor | 文字颜色 | string | - |
| textSize | 文字大小 | string|number | 14px |
| color | 按钮背景颜色 | string | - |
| darkColor | 暗黑模式下按钮颜色 | string | - |
| plainFill | 是否为带浅色背景的朴素按钮 | boolean | false |
| plain | 是否为朴素按钮 | boolean | false |
| icon | 左侧图标名称或图片链接，等同于 Icon 组件的 name 属性 | string | - |
| iconSize | 图标大小 | string|number | 16px |
| iconColor | 图标/loading颜色 | string | - |
| loading | 是否加载状态 | boolean | false |
| loadingSize | 加载图标大小 | string|number | 18px |
| loadingText | 加载状态提示文字，按钮处于加载状态时会替换掉按钮的文字 | string | - |
| loadingMode | 加载图标类型 ，等同于 Loading 组件的 type 属性 | string | spinner |
| disabled | 是否禁用 | boolean | false |
| shape | 按钮形状，可选 round square | string | - |
| height | 按钮高度 | string|number | - |
| width | 按钮宽度 | string|number | - |
| to | 页面导航地址，点击时会跳转到对应的页面 | string | - |
| openType | 开放能力，仅微信小程序支持，可选 contact share getPhoneNumber getRealtimePhoneNumber getUserInfo chooseAvatar等，其他更多类型和使用方式见小程序文档 | string | - |
| customStyle | 自定义样式 | Object |
Event
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击事件，按钮状态不为加载或禁用时才会触发 | - |
| getphonenumber | 手机号快速验证回调，open-type=getPhoneNumber时有效，仅微信小程序支持 | 见小程序文档 |
| getrealtimephonenumber | 手机号实时验证回调，open-type=getRealtimePhoneNumber 时有效,仅微信小程序支持 | 见小程序文档 |
| chooseavatar | 获取用户头像回调，open-type=chooseAvatar时有效,仅微信小程序支持 | 见小程序文档 |
| getuserinfo | 获取用户信息的回调，open-type=getUserInfo 时有效,仅微信小程序支持 | 见小程序文档 |
| opensetting | 在打开授权设置页后回调，open-type=openSetting时有效 时有效,仅微信小程序支持 | 见小程序文档 |
| contact | 打开客服会话回调，open-type=contact 时有效,仅微信小程序支持 | 见小程序文档 |
| agreeprivacyauthorization | 用户同意隐私协议事件回调，open-type=agreePrivacyAuthorization时有效,仅微信小程序支持 | 见小程序文档 |
| launchapp | 打开 APP 成功的回调，open-type=launchApp时有效,仅微信小程序支持 | 见小程序文档 |
| error | 当使用开放能力时，发生错误的回调，open-type=launchApp时有效,仅微信小程序支持 | 见小程序文档 |
小程序的开放能力见小程序文档
类型定义
组件导出如下类型
ts
import { ButtonType, ButtonSize, ButtonShape } from '@/uni_modules/rice-ui';
//组件类型
const buttonRef=ref<RiceButtonComponentPublicInstance|null>(null)