Button 按钮

引入

在app.json或index.json中引入组件，详细介绍见快速上手

  1. "usingComponents": {
  2.   "van-button": "@vant/weapp/button/index"
  3. }

代码演示

按钮类型

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

  1. <van-button type="default">默认按钮</van-button>
  2. <van-button type="primary">主要按钮</van-button>
  3. <van-button type="info">信息按钮</van-button>
  4. <van-button type="warning">警告按钮</van-button>
  5. <van-button type="danger">危险按钮</van-button>

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色

  1. <van-button plain type="primary">朴素按钮</van-button>
  2. <van-button plain type="info">朴素按钮</van-button>

细边框

设置hairline属性可以开启 0.5px 边框，基于伪类实现

  1. <van-button plain hairline type="primary">细边框按钮</van-button>
  2. <van-button plain hairline type="info">细边框按钮</van-button>

禁用状态

通过disabled属性来禁用按钮，此时按钮的bind:click事件不会触发

  1. <van-button disabled type="primary">禁用状态</van-button>
  2. <van-button disabled type="info">禁用状态</van-button>

加载状态

  1. <van-button loading type="primary" />
  2. <van-button loading type="primary" loading-type="spinner" />
  3. <van-button loading type="info" loading-text="加载中..." />

按钮形状

  1. <van-button square type="primary">方形按钮</van-button>
  2. <van-button round type="info">圆形按钮</van-button>

图标按钮

通过icon属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL

  1. <van-button icon="star-o" type="primary" />
  2. <van-button icon="star-o" type="primary">按钮</van-button>
  3. <van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">
  4.   按钮
  5. </van-button>

按钮尺寸

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

  1. <van-button type="primary" size="large">大号按钮</van-button>
  2. <van-button type="primary" size="normal">普通按钮</van-button>
  3. <van-button type="primary" size="small">小型按钮</van-button>
  4. <van-button type="primary" size="mini">迷你按钮</van-button>

块级元素

通过block属性可以将按钮的元素类型设置为块级元素

  1. <van-button type="primary" block>块级元素</van-button>

自定义颜色

通过color属性可以自定义按钮的颜色

  1. <van-button color="#7232dd">单色按钮</van-button>
  2. <van-button color="#7232dd" plain>单色按钮</van-button>
  3. <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">
  4.   渐变色按钮
  5. </van-button>

API

Props

参数说明类型默认值版本
id标识符string--
type按钮类型，可选值为 primary info warning dangerstringdefault-
size按钮尺寸，可选值为 normal large small ministringnormal-
color按钮颜色，支持传入linear-gradient渐变色string-1.0.0
icon左侧图标名称或图片链接，可选值见 Icon 组件string--
class-prefix图标类名前缀，同 Icon 组件的 class-prefix 属性stringvan-icon-
plain是否为朴素按钮booleanfalse-
block是否为块级元素booleanfalse-
round是否为圆形按钮booleanfalse-
square是否为方形按钮booleanfalse-
disabled是否禁用按钮booleanfalse-
hairline是否使用 0.5px 边框booleanfalse-
loading是否显示为加载状态booleanfalse-
loading-text加载状态提示文字string--
loading-type加载状态图标类型，可选值为 spinnerstringcircular-
loading-size加载图标大小string20px-
custom-style自定义样式string--
open-type微信开放能力，具体支持可参考 微信官方文档string--
app-parameter打开 APP 时，向 APP 传递的参数string--
lang指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文		stringen-
session-from会话来源string--
business-id客服消息子商户 idnumber--
send-message-title会话内消息卡片标题string当前标题-
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径-
send-message-imgsendMessageImgstring截图-
show-message-card显示会话内消息卡片stringfalse-
dataset按钮 dataset，open-type 为 share 时，可在 onShareAppMessage 事件的 event.target.dataset.detail 中看到传入的值any--
form-type用于 form 组件，可选值为submit reset，点击分别会触发 form 组件的 submit/reset 事件string--

Events

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

Button 提供的是 click 事件而不是原生 tap 事件，按钮禁用时，click 事件不会触发，tap 事件依然会触发。

外部样式类

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

Button 按钮 - 图1