Button 按钮

概述

基础组件，触发业务逻辑时使用。

使用指南

在 .json 中引入组件

  1. "usingComponents": {
  2.     "i-button": "../../dist/button/index"
  3. }

示例

  1. 一般用法
  3. <i-button bind:click="handleClick">默认按钮</i-button>
  4. <i-button bind:click="handleClick" type="error" long="true">联通两边按钮</i-button>
  5. <i-button bind:click="handleClick" type="primary">Primary</i-button>
  6. <i-button bind:click="handleClick" type="ghost">Ghost</i-button>
  7. <i-button bind:click="handleClick" type="info">Info</i-button>
  8. <i-button bind:click="handleClick" type="success">Success</i-button>
  9. <i-button bind:click="handleClick" type="warning">Warning</i-button>
  10. <i-button bind:click="handleClick" type="error">Error</i-button>
  12. 不同尺寸
  14. <i-button bind:click="handleClick" type="primary" size="large">大尺寸</i-button>
  15. <i-button bind:click="handleClick" type="primary" size="default">默认尺寸</i-button>
  16. <i-button bind:click="handleClick" type="primary" size="small">小尺寸</i-button>
  18. 圆角的不同尺寸
  20. <i-button bind:click="handleClick" type="success" shape="circle" size="large">大尺寸</i-button>
  21. <i-button bind:click="handleClick" type="success" shape="circle">默认尺寸</i-button>
  22. <i-button bind:click="handleClick" type="success" shape="circle" size="small">小尺寸</i-button>
  24. <i-button bind:click="handleClick" type="primary" loading="true">加载中按钮</i-button>
  26. <i-button bind:click="handleClick" type="primary" disabled>禁用按钮</i-button>

API

Panel properties

属性说明类型默认值
i-class自定义 class 类名String-
type按钮类型，可选值为 default, primary, ghost, info, success, warning, error 或者不设置String-
inline是否为行内元素，开启后宽度为自适应Booleanfalse
size按钮大小，可选值为 large、small、default 或者不设置String-
shape按钮形状，可选值为 circle 和 squareStringsquare
disabled设置按钮为禁用状态Booleanfalse
loading设置按钮为加载中状态Booleanfalse
long开启后，按钮没有间距Booleanfalse
open-type微信开放能力String-
app-parameter打开 APP 时，向 APP 传递的参数String-
hover-start-time按住后多久出现点击态，单位毫秒Number20
hover-stay-time手指松开后点击态保留时间，单位毫秒Number70
session-from会话来源String-
send-message-title会话内消息卡片标题String当前标题
send-message-path会话内消息卡片点击跳转小程序路径String当前分享路径
send-message-img会话内消息卡片图片String截图
send-message-card显示会话内消息卡片Booleanfalse

Button events

事件名说明返回值
bind:click按钮在可用状态被点击时触发-
bind:getuserinfo用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同wx.getUserInfo-
bind:contact客服消息回调-
bind:getphonenumber获取用户手机号回调-
bind:error当使用开放能力时，发生错误的回调-