vant-weapp/packages/button/README.md

Button 按钮

使用指南

在 json 文件中配置button组件

"usingComponents": {
  "van-button": "path/to/vant-weapp/dist/button/index"
}

代码演示

按钮类型

支持default、primary、warning、danger四种类型，默认为default

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

朴素按钮

<van-button plain type="primary">朴素按钮</van-button>
<van-button plain type="danger">朴素按钮</van-button>

禁用状态

通过disabled属性来禁用按钮，此时按钮不可点击

<van-button disabled type="primary">禁用状态</van-button>
<van-button disabled type="danger">禁用状态</van-button>

加载状态

<van-button loading type="primary" />
<van-button loading type="danger" />

按钮形状

<van-button square type="primary">方形按钮</van-button>
<van-button round type="danger">圆形按钮</van-button>

按钮尺寸

支持large、normal、small、mini四种尺寸，默认为normal

<van-button size="large">大号按钮</van-button>
<van-button size="normal">普通按钮</van-button>
<van-button size="small">小型按钮</van-button>
<van-button size="mini">迷你按钮</van-button>

API

参数	说明	类型	默认值
id	标识符	String	-
type	按钮类型，可选值为 primary warning danger	String	default
size	按钮尺寸，可选值为 normal large small mini	String	normal
plain	是否为朴素按钮	Boolean	false
disabled	是否禁用按钮	Boolean	false
loading	是否显示为加载状态	Boolean	false
block	是否为块级元素	Boolean	false
round	是否为圆形按钮	Boolean	false
square	是否为方形按钮	Boolean	false
open-type	微信开放能力，具体支持可参考 微信官方文档	String	-
app-parameter	打开 APP 时，向 APP 传递的参数	String	-
hover-start-time	按住后多久出现点击态，单位毫秒	Number	20
hover-stay-time	手指松开后点击态保留时间，单位毫秒	Number	70
lang	指定返回用户信息的语言，zh_CN 简体中文， zh_TW 繁体中文，en 英文	String	en
session-from	会话来源	String	-
send-message-title	会话内消息卡片标题	String	当前标题
send-message-path	会话内消息卡片点击跳转小程序路径	String	当前分享路径
send-message-img	sendMessageImg	String	截图
show-message-card	显示会话内消息卡片	String	false

Event

事件名	说明	参数
bind:click	点击按钮且按钮状态不为加载或禁用时触发	-
bind:getuserinfo	用户点击该按钮时，会返回获取到的用户信息， 从返回参数的 detail 中获取到的值同 wx.getUserInfo	-
bind:contact	客服消息回调	-
bind:getphonenumber	获取用户手机号回调	-
bind:error	当使用开放能力时，发生错误的回调	-
bind:opensetting	在打开授权设置页后回调	-

外部样式类

类名	说明
custom-class	根节点样式类
loading-class	加载图标样式类

更新日志

版本	类型	内容
0.0.1	feature	新增组件
0.1.1	feature	新增 square 属性
0.3.0	bugfix	修复在加载状态下仍然显示文字的问题
0.3.4	feature	新增 id 属性
0.3.7	feature	新增 round 属性