Button - 《Taro 文档帮助手册教程》

sidebar_label: Button
Type
Examples
ButtonProps
API Support

title: Button

sidebar_label: Button

Button.

Reference

Type

ComponentType<ButtonProps>

Examples

import Tabs from ‘@theme/Tabs’ import TabItem from ‘@theme/TabItem’

tsx
export default class PageButton extends Component {
  state = {
    btn: [
      {
        text: 'Primary Normal',
        size: 'default',
        type: 'primary'
      },
      {
        text: 'Primary Loading',
        size: 'default',
        type: 'primary',
        loading: true,
      },
      {
        text: 'Primary Disabled',
        size: 'default',
        type: 'primary',
        disabled: true,
      },
      {
        text: 'Secondary Normal',
        size: 'default',
        type: 'default'
      },
      {
        text: 'Secondary Disabled',
        size: 'default',
        type: 'default',
        disabled: true,
      },
      {
        text: 'Wran Normal',
        size: 'default',
        type: 'warn'
      },
      {
        text: 'Wran 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>
        <Button className='btn-max-w' plain type='primary' disabled>disabled button</Button>
        <Button className='btn-max-w' plain >button</Button>
        <Button className='btn-max-w' plain disabled >button</Button>
        <Button size='mini' type='primary'>button</Button>
        <Button size='mini' >button</Button>
        <Button size='mini' type='warn'>button</Button>
      </View>
    )
  }
}

html
<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>
    <button class="btn-max-w" :plain="true" type="primary" :disabled="true">disabled button</button>
    <button class="btn-max-w" :plain="true">button</button>
    <button class="btn-max-w" :plain="true" :disabled="true">button</button>
    <button size="mini" type="primary">button</button>
    <button size="mini" >button</button>
    <button size="mini" type="warn">button</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      btn: [
        {
          text: 'Primary Normal',
          size: 'default',
          type: 'primary'
        },
        {
          text: 'Primary Loading',
          size: 'default',
          type: 'primary',
          loading: true,
        },
        {
          text: 'Primary Disabled',
          size: 'default',
          type: 'primary',
          disabled: true,
        },
        {
          text: 'Secondary Normal',
          size: 'default',
          type: 'default'
        },
        {
          text: 'Secondary Disabled',
          size: 'default',
          type: 'default',
          disabled: true,
        },
        {
          text: 'Secondary Normal',
          size: 'default',
          type: 'warn'
        },
        {
          text: 'Secondary Disabled',
          size: 'default',
          type: 'warn',
          disabled: true,
        }
      ]
    }
  }
}
</script>

ButtonProps

Property	Type	Default	Required	Description
size	`"default" \| "mini"`	`default`	No	The size of the button.
type	`"default" \| "primary" \| "warn"`	`default`	No	The style class of the button.
plain	`boolean`	`false`	No	Specifies whether the button is hollow with transparent background.
disabled	`boolean`	`false`	No	Specifies whether to disable the component.
loading	`boolean`	`false`	No	Specifies whether a loading icon exists before the name.
formType	`"submit" \| "reset"`		No	Used in the `<form/>` component. When it is tapped, the submit and reset events of the `<form/>` component are separately triggered.
openType	`"contact" \| "contactShare" \| "share" \| "getRealnameAuthInfo" \| "getAuthorize" \| "getPhoneNumber" \| "getUserInfo" \| "lifestyle" \| "launchApp" \| "openSetting" \| "feedback"`		No	Open capability of WeChat
hoverClass	`string`	`button-hover`	No	The style class the button that is tapped. When `hover-class="none"`, the tap state is not displayed.
hoverStyle	`string`	`none`	No	Since RN does not support Class, the Button component on the RN side implements the `hoverStyle` property, which is written similarly to style, except that the style of `hoverStyle` specifies the style to be pressed.
hoverStopPropagation	`boolean`	`false`	No	Specifies whether to block the tapped state from the ancestor node of this node.
hoverStartTime	`number`	`20`	No	Specifies the time elapsed after tapping but before the tapped state occurs. It is measured in milliseconds.
hoverStayTime	`number`	`70`	No	Specifies the duration when the tapped state retains after stopping tapping. It is measured in milliseconds.
lang	`"en" \| "zh_CN" \| "zh_TW"`		No	Specifies the language of the returned user information. zh_CN: Simplified Chinese; zh_TW: Traditional Chinese; en: English. Pre-requisites: `open-type="getUserInfo"`
sessionFrom	`string`		No	The source of the chat. It is valid when `open-type="contact"`
sendMessageTitle	`string`	`Current title`	No	The title of the message card in the chat. It is valid when `open-type="contact"`
sendMessagePath	`string`	`Current title`	No	The path of the Mini Program to which the message card in the chat is tapped to navigate. It is valid when `open-type="contact"`
sendMessageImg	`string`	`Screenshot`	No	The image of the message card in the chat. It is valid when `open-type="contact"`
appParameter	`string`		No	The parameter passed to the app when it is launched. It is valid when `open-type="launchApp"`
scope	`"userInfo" \| "phoneNumber"`		No	Alipay Mini-Program scope. It is valid when `open-type="getAuthorize"`
showMessageCard	`boolean`	`false`	No	Specifies whether to display message cards in a chat. It is valid when `open-type="contact"`
onGetUserInfo	`BaseEventOrigFunction<onGetUserInfoEventDetail>`		No	When a user taps this button, the user information obtained is returned. The detail data that is obtained via callback is consistent with that returned by `Taro.getUserInfo`. It is valid when `open-type="getUserInfo"`
onGetAuthorize	`BaseEventOrigFunction<any>`		No	Callback used to get the authorization of Alipay member information. It is valid when `open-type="getAuthorize"`
onContact	`BaseEventOrigFunction<onContactEventDetail>`		No	Callback used to obtain customer messages. It is valid when `open-type="contact"`.
onGetPhoneNumber	`BaseEventOrigFunction<onGetPhoneNumberEventDetail>`		No	Callback used to obtain the user’s mobile number. It is valid when `open-type="getphonenumber"`
onGetRealnameAuthInfo	`BaseEventOrigFunction<any>`		No	Callback used to obtain the user’s real name. It is valid when `open-type="getRealnameAuthInfo"`
onError	`BaseEventOrigFunction<any>`		No	Callback used when an error occurred while using open capability. It is valid when `open-type="launchApp"`
onOpenSetting	`BaseEventOrigFunction<onOpenSettingEventDetail>`		No	Callback used after the authorization setting page is opened. It is valid when `open-type="openSetting"`
onLaunchapp	`BaseEventOrigFunction<any>`		No	Callback used after the app is launched. It is valid when `open-type="launchApp"`

API Support

API	WeChat Mini-Program	Alipay Mini-Program	H5	React Native
ButtonProps.size	✔️		✔️	✔️
ButtonProps.type	✔️		✔️	✔️
ButtonProps.plain	✔️		✔️	✔️
ButtonProps.disabled	✔️		✔️	✔️
ButtonProps.loading	✔️		✔️	✔️
ButtonProps.formType	✔️
ButtonProps.openType	✔️
ButtonProps.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

Valid values of size

Value	Description
default	Default size
mini	Minimum size

type

Valid values of type

Value	Description
primary	Green
default	White
warn	Red

formType

Valid values of form-type

Value	Description
submit	Submits the form
reset	Resets the form

openType

Valid values of open-type

Value	Description
contact	Opens a customer service chat. If the user taps the message card in the chat to return to a Mini Program, the specific information can be obtained from the bindcontact callback. See details.
contactShare
share	Triggers forwarding. Before use, read User Guide.
getRealnameAuthInfo
getAuthorize
getPhoneNumber	Gets the user’s mobile number. The user information can be obtained from the bindgetphonenumber callback. Vue3 example: `<button @getphonenumber=”callback” />` See details
getUserInfo	Gets user information. The user information can be obtained from the bindgetuserinfo callback.
lifestyle
launchApp	Opens the app. The parameters passed to the app can be set via the app-parameter property. See details
openSetting	Opens the authorization setting page.
feedback	Opens the Feedback page, where users can submit feedback and upload logs. Developers can log in to the Mini Program admin console and open the Customer Service Feedback page from the left-side menu to get the feedback.

lang

Valid values of lang

Value	Description
en	English
zh_CN	Simplified Chinese
zh_TW	Traditional Chinese

gender

Valid values of gender

Value	Description
0	Unknown
1	Male
2	Female

onGetUserInfoEventDetail

Param	Type	Description
userInfo	`{{ nickName: string; avatarUrl: string; gender: 0 \| 1 \| 2; province: string; city: string; country: string; }}`
rawData	`string`	Raw data `JSON` strings that do not include sensitive information and are used to calculate the signature.
signature	`string`	Use `sha1(rawData + sessionkey)` to get the string for verifying user information
encryptedData	`string`	Encrypted data with complete user information, including sensitive data.
iv	`string`	The initial vector of the encryption algorithm
errMsg	`string`

onContactEventDetail

Param	Type	Description
errMsg	`string`
path	`string`	The path specified by the mini-program’s message.
query	`Record<string, any>`	The query parameters specified by the mini-program’s message.

onGetPhoneNumberEventDetail

Param	Type	Description
errMsg	`string`
encryptedData	`string`	Encrypted data with complete user information including sensitive data.
iv	`string`	The initial vector of the encryption algorithm.

onOpenSettingEventDetail

Param	Type
errMsg	`string`
authSetting	`Record<string, boolean>`

API Support

API	WeChat Mini-Program	H5	React Native
Button	✔️	✔️	✔️