Button

Button

按钮

参考文档

类型

ComponentType<ButtonProps>

示例代码

React
Vue

export default class PageButton extends Component {
  state = {
    btn: [
      {
        text: '页面主操作 Normal',
        size: 'default',
        type: 'primary'
      },
      {
        text: '页面主操作 Loading',
        size: 'default',
        type: 'primary',
        loading: true,
      },
      {
        text: '页面主操作 Disabled',
        size: 'default',
        type: 'primary',
        disabled: true,
      },
      {
        text: '页面次要操作 Normal',
        size: 'default',
        type: 'default'
      },
      {
        text: '页面次要操作 Disabled',
        size: 'default',
        type: 'default',
        disabled: true,
      },
      {
        text: '警告类操作 Normal',
        size: 'default',
        type: 'warn'
      },
      {
        text: '警告类操作 Disabled',
        size: 'default',
        type: 'warn',
        disabled: true,
      }
    ]
  }
  render () {
    return (
      <View className='container'>
        {this.state.btn.map(item => {
          return (
            <Button
              size={item.size ? item.size : ''}
              type={item.type ? item.type : ''}
              loading={item.loading ? item.loading : false}
              disabled={item.disabled ? item.disabled : false}
            >
              {item.text}
            </Button>
          )
        })}
        <Button className='btn-max-w' plain type='primary'>按钮</Button>
        <Button className='btn-max-w' plain type='primary' disabled>不可点击的按钮</Button>
        <Button className='btn-max-w' plain >按钮</Button>
        <Button className='btn-max-w' plain disabled >按钮</Button>
        <Button size='mini' type='primary'>按钮</Button>
        <Button size='mini' >按钮</Button>
        <Button size='mini' type='warn'>按钮</Button>
      </View>
    )
  }
}

<template>
  <view class="container">
    <button
      v-for="item in btn"
      :size="item.size ? item.size : ''"
      :type="item.type ? item.type : ''"
      :loading="item.loading ? item.loading : false"
      :disabled="item.disabled ? item.disabled : false"
    >
      {{ item.text }}
    </button>
    <button class="btn-max-w" :plain="true" type="primary">按钮</button>
    <button class="btn-max-w" :plain="true" type="primary" :disabled="true">不可点击的按钮</button>
    <button class="btn-max-w" :plain="true">按钮</button>
    <button class="btn-max-w" :plain="true" :disabled="true">按钮</button>
    <button size="mini" type="primary">按钮</button>
    <button size="mini" >按钮</button>
    <button size="mini" type="warn">按钮</button>
  </view>
</template>
<script>
export default {
  data() {
    return {
      btn: [
        {
          text: '页面主操作 Normal',
          size: 'default',
          type: 'primary'
        },
        {
          text: '页面主操作 Loading',
          size: 'default',
          type: 'primary',
          loading: true,
        },
        {
          text: '页面主操作 Disabled',
          size: 'default',
          type: 'primary',
          disabled: true,
        },
        {
          text: '页面次要操作 Normal',
          size: 'default',
          type: 'default'
        },
        {
          text: '页面次要操作 Disabled',
          size: 'default',
          type: 'default',
          disabled: true,
        },
        {
          text: '警告类操作 Normal',
          size: 'default',
          type: 'warn'
        },
        {
          text: '警告类操作 Disabled',
          size: 'default',
          type: 'warn',
          disabled: true,
        }
      ]
    }
  }
}
</script>

ButtonProps

参数	类型	默认值	必填	说明
size	`“default” \| “mini”`	`default`	否	按钮的大小
type	`“default” \| “primary” \| “warn”`	`default`	否	按钮的样式类型
plain	`boolean`	`false`	否	按钮是否镂空，背景色透明
disabled	`boolean`	`false`	否	是否禁用
loading	`boolean`	`false`	否	名称前是否带 loading 图标
formType	`“submit” \| “reset”`		否	用于 `<form/>` 组件，点击分别会触发 `<form/>` 组件的 submit/reset 事件
openType	`“contact” \| “contactShare” \| “share” \| “getRealnameAuthInfo” \| “getAuthorize” \| “getPhoneNumber” \| “getUserInfo” \| “lifestyle” \| “launchApp” \| “openSetting” \| “feedback”`		否	微信开放能力
hoverClass	`string`	`button-hover`	否	指定按下去的样式类。当 `hover-class=”none”` 时，没有点击态效果
hoverStyle	`string`	`none`	否	由于 RN 不支持 Class，故 RN 端的 Button 组件实现了 `hoverStyle`属性，写法和 style 类似，只不过 `hoverStyle` 的样式是指定按下去的样式。
hoverStopPropagation	`boolean`	`false`	否	指定是否阻止本节点的祖先节点出现点击态
hoverStartTime	`number`	`20`	否	按住后多久出现点击态，单位毫秒
hoverStayTime	`number`	`70`	否	手指松开后点击态保留时间，单位毫秒
lang	`“en” \| “zh_CN” \| “zh_TW”`		否	指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。生效时机: `open-type=”getUserInfo”`
sessionFrom	`string`		否	会话来源生效时机：`open-type=”contact”`
sendMessageTitle	`string`	`当前标题`	否	会话内消息卡片标题生效时机：`open-type=”contact”`
sendMessagePath	`string`	`当前标题`	否	会话内消息卡片点击跳转小程序路径生效时机：`open-type=”contact”`
sendMessageImg	`string`	`截图`	否	会话内消息卡片图片生效时机：`open-type=”contact”`
appParameter	`string`		否	打开 APP 时，向 APP 传递的参数生效时机：`open-type=”launchApp”`
scope	`“userInfo” \| “phoneNumber”`		否	支付宝小程序 scope 生效时机：`open-type=”getAuthorize”`
showMessageCard	`boolean`	`false`	否	显示会话内消息卡片生效时机：`open-type=”contact”`
onGetUserInfo	`BaseEventOrigFunction<onGetUserInfoEventDetail>`		否	用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与 Taro.getUserInfo 返回的一致生效时机: `open-type=”getUserInfo”`
onGetAuthorize	`BaseEventOrigFunction<any>`		否	支付宝获取会员基础信息授权回调生效时机：`open-type=”getAuthorize”`
onContact	`BaseEventOrigFunction<onContactEventDetail>`		否	客服消息回调生效时机：`open-type=”contact”`
onGetPhoneNumber	`BaseEventOrigFunction<onGetPhoneNumberEventDetail>`		否	获取用户手机号回调生效时机：`open-type=”getphonenumber”`
onGetRealnameAuthInfo	`BaseEventOrigFunction<any>`		否	获取用户实名生效时机：`open-type=”getRealnameAuthInfo”`
onError	`BaseEventOrigFunction<any>`		否	当使用开放能力时，发生错误的回调生效时机：`open-type=”launchApp”`
onOpenSetting	`BaseEventOrigFunction<onOpenSettingEventDetail>`		否	在打开授权设置页后回调生效时机：`open-type=”openSetting”`
onLaunchapp	`BaseEventOrigFunction<any>`		否	打开 APP 成功的回调生效时机：`open-type=”launchApp”`

API 支持度

API	微信小程序	支付宝小程序	H5	React Native
ButtonProps.size	✔️		✔️	✔️
ButtonProps.type	✔️		✔️	✔️
ButtonProps.plain	✔️		✔️	✔️
ButtonProps.disabled	✔️		✔️	✔️
ButtonProps.loading	✔️		✔️	✔️
ButtonProps.formType	✔️
ButtonProps.openType	✔️
ButtonProps.hoverClass	✔️		✔️	(支持 hoverStyle 属性，但框架未支持 hoverClass)
ButtonProps.hoverStyle				✔️
ButtonProps.hoverStopPropagation	✔️
ButtonProps.hoverStartTime	✔️		✔️	✔️
ButtonProps.hoverStayTime	✔️		✔️	✔️
ButtonProps.lang	✔️
ButtonProps.sessionFrom	✔️
ButtonProps.sendMessageTitle	✔️
ButtonProps.sendMessagePath	✔️
ButtonProps.sendMessageImg	✔️
ButtonProps.appParameter	✔️
ButtonProps.scope	✔️
ButtonProps.onGetUserInfo	✔️
ButtonProps.onGetAuthorize		✔️
ButtonProps.onContact	✔️
ButtonProps.onGetPhoneNumber	✔️
ButtonProps.onGetRealnameAuthInfo	✔️
ButtonProps.onError	✔️
ButtonProps.onOpenSetting	✔️
ButtonProps.onLaunchapp	✔️

size

size 的合法值

参数	说明
default	默认大小
mini	小尺寸

type

type 的合法值

参数	说明
primary	绿色
default	白色
warn	红色

formType

form-type 的合法值

参数	说明
submit	提交表单
reset	重置表单

openType

open-type 的合法值

参数	说明
contact	打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息参考地址
contactShare
share	触发用户转发，使用前建议先阅读使用指引参考地址
getRealnameAuthInfo
getAuthorize
getPhoneNumber	获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息 Vue3 example: `<button @getphonenumber=”callback” />` 参考地址
getUserInfo	获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息
lifestyle
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数参考地址
openSetting	打开授权设置页
feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容

lang

lang 的合法值

参数	说明
en	英文
zh_CN	简体中文
zh_TW	繁体中文

onGetUserInfoEventDetail

参数	类型	说明
userInfo	`{ nickName: string; avatarUrl: string; gender: 0 \| 1 \| 2; province: string; city: string; country: string; }`
rawData	`string`	不包括敏感信息的原始数据 `JSON` 字符串，用于计算签名
signature	`string`	使用 `sha1(rawData + sessionkey)` 得到字符串，用于校验用户信息
encryptedData	`string`	包括敏感数据在内的完整用户信息的加密数据
iv	`string`	加密算法的初始向量
errMsg	`string`

gender

性别的合法值

参数	说明
0	未知
1	男
2	女

onContactEventDetail

参数	类型	说明
errMsg	`string`
path	`string`	小程序消息指定的路径
query	`Record<string, any>`	小程序消息指定的查询参数

onGetPhoneNumberEventDetail

参数	类型	说明
errMsg	`string`
encryptedData	`string`	包括敏感数据在内的完整用户信息的加密数据
iv	`string`	加密算法的初始向量

onOpenSettingEventDetail

参数	类型
errMsg	`string`
authSetting	`Record<string, boolean>`

API 支持度

API	微信小程序	H5	React Native
Button	✔️	✔️	✔️