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" 时表示没有点击态效果。

说明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-typegetAuthorize 时有效。

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-typegetAuthorize 时,可以设置 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>
阿里云首页 移动开发平台 mPaaS 相关技术圈