button - 移动开发平台 mPaaS

本文介绍按钮（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"` 时表示没有点击态效果。说明：`button-hover` 默认为 `{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}`。	-
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	-	点击	-
app-parameter	String	-	打开 APP 时，向 APP 传递的参数，`open-type="launchApp"` 时有效。	-

open-type 有效值

值	说明	最低版本
share	触发自定义分享，可使用 `canIUse('button.open-type.share')` 判断	1.1.0
getAuthorize	支持小程序授权，可使用 `canIUse('button.open-type.getAuthorize')` 判断	1.11.0
contactShare	分享到通讯录好友，可使用 `canIUse('button.open-type.contactShare')` 判断	1.11.0

scope 有效值

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

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

图示

代码示例

<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>