Button
按钮。

属性及支持度

微信小程序 H5 ReactNative 属性名 类型 默认值 说明
√ √ √ type String default 按钮的样式类型
√ √ √ size String default 按钮的大小 px
√ √ √ plain Boolean false 按钮是否镂空，背景色透明
√ √ √ disabled Boolean false 是否禁用
√ √ √ loading Boolean false 名称前是否带 loading 图标
√ x formType String 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件
√ x openType String 微信开放能力
√ x appParameter String 打开 APP 时，向 APP 传递的参数
√ √ √ hoverClass String button-hover 指定按钮按下去的样式类。当 hover-class=”none” 时，没有点击态效果
√ x hoverStopPropagation Boolean false 指定是否阻止本节点的祖先节点出现点击态
√ √ √ hoverStartTime Number 20 按住后多久出现点击态，单位毫秒
√ √ √ hoverStayTime Number 70 手指松开后点击态保留时间，单位毫秒
√ x onGetUserInfo Handler 用户点击该按钮时，会返回获取到的用户信息，从返回参数的 detail 中获取到的值同 wx.getUserInfo
√ x onGetPhoneNumber Handler 获取用户手机号回调
√ x lang String en 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。
示例：
  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Text, Button } from '@tarojs/components'
  4. export default class PageButton extends Component {
  5.     constructor() {
  6.         super(...arguments)
  7.     }
  9.     state = {
  10.         btn: [
  11.             {
  12.                 text: '页面主操作 Normal',
  13.                 size: 'default',
  14.                 type: 'primary'
  15.             },
  16.             {
  17.                 text: '页面主操作 Loading',
  18.                 size: 'default',
  19.                 type: 'primary',
  20.                 loading: true,
  21.             },
  22.             {
  23.                 text: '页面主操作 Disabled',
  24.                 size: 'default',
  25.                 type: 'primary',
  26.                 disabled: true,
  27.             },
  28.             {
  29.                 text: '页面次要操作 Normal',
  30.                 size: 'default',
  31.                 type: 'default'
  32.             },
  33.             {
  34.                 text: '页面次要操作 Disabled',
  35.                 size: 'default',
  36.                 type: 'default',
  37.                 disabled: true,
  38.             },
  39.             {
  40.                 text: '警告类操作 Normal',
  41.                 size: 'default',
  42.                 type: 'warn'
  43.             },
  44.             {
  45.                 text: '警告类操作 Disabled',
  46.                 size: 'default',
  47.                 type: 'warn',
  48.                 disabled: true,
  49.             },
  50.         ]
  51.     }
  52.     render() {
  53.         return (
  54.             <View className="container">
  55.                 {this.state.btn.map(item => {
  56.                     return (
  57.                         <Button
  58.                             size={item.size ? item.size : ''}
  59.                             type={item.type ? item.type : ''}
  60.                             loading={item.loading ? item.loading : false}
  61.                             disabled={item.disabled ? item.disabled : false}
  62.                         >
  63.                             {item.text}
  64.                         </Button>
  65.                     )
  66.                 })}
  67.                 <Button className="btn-max-w" plain type="primary">按钮</Button>
  68.                 <Button className="btn-max-w" plain type="primary" disabled>不可点击的按钮</Button>
  69.                 <Button className="btn-max-w" plain >按钮</Button>
  70.                 <Button className="btn-max-w" plain disabled >按钮</Button>
  71.                 <Button size="mini" type="primary">按钮</Button>
  72.                 <Button size="mini" >按钮</Button>
  73.                 <Button size="mini" type="warn">按钮</Button>
  74.             </View>
  75.         )
  76.     }
  77. }