Button 按钮

介绍

按钮用于触发一个操作,如提交表单。

引入

app.jsonindex.json中引入组件,详细介绍见快速上手

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

代码演示

按钮类型

支持defaultprimaryinfowarningdanger五种类型,默认为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>

按钮尺寸

支持largenormalsmallmini四种尺寸,默认为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