基础组件 - Button 按钮 - 《Vant Weapp v0.5.5 小程序组件》

Button 按钮

Button 按钮

使用指南

在 json 文件中配置button组件

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

代码演示

按钮类型

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

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</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" loading-text="加载中..." />

按钮形状

<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` `info` `warning` `danger`	`String`	`default`
size	按钮尺寸，可选值为 `normal` `large` `small` `mini`	`String`	`normal`
plain	是否为朴素按钮	`Boolean`	`false`
block	是否为块级元素	`Boolean`	`false`
round	是否为圆形按钮	`Boolean`	`false`
square	是否为方形按钮	`Boolean`	`false`
disabled	是否禁用按钮	`Boolean`	`false`
loading	是否显示为加载状态	`Boolean`	`false`
loading-text	加载状态提示文字	`String`	-
loading-size	加载图标大小	`String`	`20px`
open-type	微信开放能力，具体支持可参考微信官方文档	`String`	-
app-parameter	打开 APP 时，向 APP 传递的参数	`String`	-
lang	指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文	`String`	`en`
session-from	会话来源	`String`	-
business-id	客服消息子商户 id	`Number`	-
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 属性

原文: https://youzan.github.io/vant-weapp/#/button