title: Button

sidebar_label: 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 传递的参数
√ √ x (支持 hoverStyle 属性，但框架未支持 hoverClass) 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.   state = {
  6.     btn: [
  7.       {
  8.         text: '页面主操作 Normal',
  9.         size: 'default',
  10.         type: 'primary'
  11.       },
  12.       {
  13.         text: '页面主操作 Loading',
  14.         size: 'default',
  15.         type: 'primary',
  16.         loading: true,
  17.       },
  18.       {
  19.         text: '页面主操作 Disabled',
  20.         size: 'default',
  21.         type: 'primary',
  22.         disabled: true,
  23.       },
  24.       {
  25.         text: '页面次要操作 Normal',
  26.         size: 'default',
  27.         type: 'default'
  28.       },
  29.       {
  30.         text: '页面次要操作 Disabled',
  31.         size: 'default',
  32.         type: 'default',
  33.         disabled: true,
  34.       },
  35.       {
  36.         text: '警告类操作 Normal',
  37.         size: 'default',
  38.         type: 'warn'
  39.       },
  40.       {
  41.         text: '警告类操作 Disabled',
  42.         size: 'default',
  43.         type: 'warn',
  44.         disabled: true,
  45.       }
  46.     ]
  47.   }
  48.   render () {
  49.     return (
  50.       <View className='container'>
  51.         {this.state.btn.map(item => {
  52.           return (
  53.             <Button
  54.               size={item.size ? item.size : ''}
  55.               type={item.type ? item.type : ''}
  56.               loading={item.loading ? item.loading : false}
  57.               disabled={item.disabled ? item.disabled : false}
  58.             >
  59.               {item.text}
  60.             </Button>
  61.           )
  62.         })}
  63.         <Button className='btn-max-w' plain type='primary'>按钮</Button>
  64.         <Button className='btn-max-w' plain type='primary' disabled>不可点击的按钮</Button>
  65.         <Button className='btn-max-w' plain >按钮</Button>
  66.         <Button className='btn-max-w' plain disabled >按钮</Button>
  67.         <Button size='mini' type='primary'>按钮</Button>
  68.         <Button size='mini' >按钮</Button>
  69.         <Button size='mini' type='warn'>按钮</Button>
  70.       </View>
  71.     )
  72.   }
  73. }