全部产品

button

更新时间:2019-09-09 11:38:05

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

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

图示

代码示例

  1. <view class="page">
  2. <view class="section">
  3. <view class="title">Type</view>
  4. <button type="default">default</button>
  5. <button type="primary">primary</button>
  6. <button type="warn">warn</button>
  7. </view>
  8. <view class="section" style="background:#ddd;">
  9. <view class="title">Misc</view>
  10. <button type="default" plain>plain</button>
  11. <button type="default" disabled>disabled</button>
  12. <button type="default" loading={{true}}>loading</button>
  13. <button type="default" hover-class="red">hover-red</button>
  14. </view>
  15. <view class="section">
  16. <view class="title">Size</view>
  17. <button type="default" size="mini">mini</button>
  18. </view>
  19. <view class="section">
  20. <view class="title">Type</view>
  21. <form onSubmit="onSubmit" onReset="onReset">
  22. <button form-type="submit">submit</button>
  23. <button form-type="reset">reset</button>
  24. </form>
  25. </view>
  26. </view>