button - Mobile Platform as a Service

本文介紹按鈕（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	-	點擊	-

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>