Button
Button 按钮
代码示例
import { BfButton } from '@bud-fe/react-taro-ui';import { View } from '@tarojs/components';import React from 'react';export default () => {return (<><View className="group-title">基础用法</View><BfButton>default</BfButton><BfButton type="primary">primary</BfButton><BfButton loading>default loading</BfButton><View className="group-title">size="mini"</View><BfButton size="mini">default mini</BfButton><BfButton type="primary" size="mini">primary mini</BfButton><BfButton loading type="primary" size="mini">primary mini loading</BfButton><BfButton size="mini" plain>default mini</BfButton><BfButton type="primary" size="mini" plain>primary mini plain</BfButton><BfButton loading type="primary" size="mini" plain>primary mini plain loading</BfButton><View className="group-title">size="mini" disabled</View><BfButton size="mini" disabled>default mini disabled</BfButton><BfButton type="primary" size="mini" disabled>primary mini disabled</BfButton><BfButton size="mini" plain disabled>default mini plain disabled</BfButton><BfButton type="primary" size="mini" plain disabled>primary mini plain disabled</BfButton></>);};
API
属性名 | 描述 | 类型 | 默认值 |
---|---|---|---|
type | 按钮类型 | "default" | "primary" | default |
children | 按钮包含的内容 | any | -- |
size | 按钮的大小 @supported weapp, h5, rn, alipay, tt | keyof Size | default |
plain | 按钮是否镂空,背景色透明 @supported weapp, h5, rn, alipay | boolean | false |
disabled | 是否禁用 @supported weapp, h5, rn, alipay, tt | boolean | false |
loading | 名称前是否带 loading 图标 @supported weapp, h5, rn, alipay, tt | boolean | false |
formType | 用于 `<form/>` 组件,点击分别会触发 `<form/>` 组件的 submit/reset 事件 @supported weapp, alipay, tt | keyof FormType | -- |
openType | 微信开放能力 @supported weapp, alipay, qq, tt | OpenType | -- |
hoverClass | 指定按下去的样式类。当 `hover-class="none"` 时,没有点击态效果 @supported weapp, alipay, h5, tt @rn 支持 hoverStyle 属性,但框架未支持 hoverClass | string | button-hover |
hoverStyle | 由于 RN 不支持 Class,故 RN 端的 Button 组件实现了 `hoverStyle`属性,写法和 style 类似,只不过 `hoverStyle` 的样式是指定按下去的样式。 @supported rn | StyleProp<ViewStyle> | none |
hoverStopPropagation | 指定是否阻止本节点的祖先节点出现点击态 @supported weapp, alipay, tt | boolean | false |
hoverStartTime | 按住后多久出现点击态,单位毫秒 @supported weapp, alipay, h5, rn, tt | number | 20 |
hoverStayTime | 手指松开后点击态保留时间,单位毫秒 @supported weapp, alipay, h5, rn, tt | number | 70 |
lang | 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。 生效时机: `open-type="getUserInfo"` @supported weapp | keyof Lang | -- |
sessionFrom | 会话来源 生效时机:`open-type="contact"` @supported weapp | string | -- |
sendMessageTitle | 会话内消息卡片标题 生效时机:`open-type="contact"` @supported weapp | string | 当前标题 |
sendMessagePath | 会话内消息卡片点击跳转小程序路径 生效时机:`open-type="contact"` @supported weapp | string | 当前标题 |
sendMessageImg | 会话内消息卡片图片 生效时机:`open-type="contact"` @supported weapp | string | 截图 |
appParameter | 打开 APP 时,向 APP 传递的参数 生效时机:`open-type="launchApp"` @supported weapp, qq | string | -- |
businessId | 微信小程序子商户能力中,添加 business-id 字段指向子商户 生效时机:`open-type="contact"` @supported weapp | string | -- |
scope | 支付宝小程序 scope 生效时机:`open-type="getAuthorize"` @supported weapp | "userInfo" | "phoneNumber" | -- |
showMessageCard | 显示会话内消息卡片 生效时机:`open-type="contact"` | boolean | false |
onGetUserInfo | 用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与 Taro.getUserInfo 返回的一致 生效时机: `open-type="getUserInfo"` @supported weapp | CommonEventFunction<onGetUserInfoEventDetail> | -- |
onGetAuthorize | 支付宝获取会员基础信息授权回调 生效时机:`open-type="getAuthorize"` @supported alipay | CommonEventFunction<any> | -- |
onContact | 客服消息回调 生效时机:`open-type="contact"` @supported weapp | CommonEventFunction<onContactEventDetail> | -- |
onGetPhoneNumber | 获取用户手机号回调 生效时机:`open-type="getphonenumber"` @supported weapp, tt | CommonEventFunction<onGetPhoneNumberEventDetail> | -- |
onGetRealNameAuthInfo | 获取用户实名 生效时机:`open-type="getRealnameAuthInfo"` @deprecated @supported weapp | CommonEventFunction<any> | -- |
onError | 当使用开放能力时,发生错误的回调 生效时机:`open-type="launchApp"` @supported weapp | CommonEventFunction<any> | -- |
onOpenSetting | 在打开授权设置页后回调 生效时机:`open-type="openSetting"` @supported weapp | CommonEventFunction<onOpenSettingEventDetail> | -- |
onLaunchApp | 打开 APP 成功的回调 生效时机:`open-type="launchApp"` @supported weapp | CommonEventFunction<any> | -- |
onChooseAvatar | 获取用户头像回调 生效时机:`open-type="chooseAvatar"` @supported weapp | CommonEventFunction<any> | -- |
id | 组件的唯一标示, 保持整个页面唯一 | string | -- |
className | 同 `class`,在 React/Nerv 里一般使用 `className` 作为 `class` 的代称 | string | -- |
style | 组件的内联样式, 可以动态设置的内联样式 | string | CSSProperties | -- |
key | 如果列表中项目的位置会动态改变或者有新的项目添加到列表中, 需要使用 `wx:key` 来指定列表中项目的唯一的标识符。 | string | number | -- |
hidden | 组件是否显示, 所有组件默认显示 | boolean | -- |
animation | 动画属性 | { actions: TaroGeneral.IAnyObject[]; } | -- |
ref | 引用 | LegacyRef<any> | -- |
dangerouslySetInnerHTML | 渲染 HTML @see /docs/html | { __html: string; } | -- |
onTouchStart | 手指触摸动作开始 | (event: ITouchEvent) => void | -- |
onTouchMove | 手指触摸后移动 | (event: ITouchEvent) => void | -- |
onTouchCancel | 手指触摸动作被打断,如来电提醒,弹窗 | (event: ITouchEvent) => void | -- |
onTouchEnd | 手指触摸动作结束 | (event: ITouchEvent) => void | -- |
onClick | 手指触摸后马上离开 | (event: ITouchEvent) => void | -- |
onLongPress | 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发 | (event: CommonEvent<any>) => void | -- |
onLongClick | 手指触摸后,超过350ms再离开(推荐使用 longpress 事件代替) | (event: CommonEvent<any>) => void | -- |
onTransitionEnd | 会在 WXSS transition 或 Taro.createAnimation 动画结束后触发 | (event: CommonEvent<any>) => void | -- |
onAnimationStart | 会在一个 WXSS animation 动画开始时触发 | (event: CommonEvent<any>) => void | -- |
onAnimationIteration | 会在一个 WXSS animation 一次迭代结束时触发 | (event: CommonEvent<any>) => void | -- |
onAnimationEnd | 会在一个 WXSS animation 动画完成时触发 | (event: CommonEvent<any>) => void | -- |
onTouchForceChange | 在支持 3D Touch 的 iPhone 设备,重按时会触发 | (event: CommonEvent<any>) => void | -- |