Button

Button

按钮。扫码体验：

属性名	类型	默认值	描述	最低版本
size	String	default	有效值 default, mini
type	String	default	按钮的样式类型，有效值 primary, default, warn
plain	Boolean	false	是否镂空
disabled	Boolean	false	是否禁用
loading	Boolean	false	按钮文字前是否带 loading 图标
hover-class	String	button-hover	按钮按下去的样式类。hover-class="none" 时表示没有点击态效果
hover-start-time	Number	20	按住后多少事件后出现点击状态，单位毫秒
hover-stay-time	Number	70	手指松开后点击状态保留时间，单位毫秒
hover-stop-propagation	Boolean	false	是否阻止当前元素的祖先元素出现点击态	1.10.0
form-type	String		有效值：submit, reset，用于组件，点击分别会触发 submit/reset 事件
open-type	String		开放能力	1.1.0
scope	String		当`open-type`为`getAuthorize`时有效	1.11.0
onTap	EventHandle		点击

注：button-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}

open-type 有效值

值	说明	最低版本
share	触发自定义分享，可使用 canIUse('button.open-type.share') 判断	1.1.0
launchApp	触发返回第三方App	1.11.0
getAuthorize	支持小程序授权，可使用 canIUse('button.open-type.getAuthorize') 判断	1.11.0
contactShare	分享到通讯录好友，可使用 canIUse('button.open-type.contactShare') 判断	1.11.0
lifestyle	关注生活号，可使用 canIUse('button.open-type.lifestyle') 判断	1.11.0

scope 有效值

当open-type为getAuthorize时，可以设置 scope 为以下值：

值	说明	最低版本
phoneNumber	唤起授权界面，用户可以授权小程序获取用户手机号	1.11.0

Screenshot

示例代码

<view class="page">
  <view class="section">
    <view class="title">Type</view>
    <button type="default">default</button>
    <button type="primary">primary</button>
    <button type="warn">warn</button>
  </view>
  <view class="section" style="background:#ddd;">
    <view class="title">Misc</view>
    <button type="default" plain>plain</button>
    <button type="default" disabled>disabled</button>
    <button type="default" loading={{true}}>loading</button>
    <button type="default" hover-class="red">hover-red</button>
  </view>
  <view class="section">
    <view class="title">Size</view>
    <button type="default" size="mini">mini</button>
  </view>
  <view class="section">
    <view class="title">Type</view>
    <form onSubmit="onSubmit" onReset="onReset">
      <button form-type="submit">submit</button>
      <button form-type="reset">reset</button>
    </form>
  </view>
</view>

原文: https://docs.alipay.com/mini/component/button