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