使用Vant Button 按钮组件，需要先进行引用。

import Vue from 'vue';
import { Button } from 'vant';

Vue.use(Button);

按钮类型

按钮 default、primary、info、warning、danger 五种类型，认为 default。

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

通过 plain 将按钮设置为朴素按钮，朴素按钮的为按钮颜色，背景为白色。

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

设置 hairline 可以展示 0.5px 的细边框。

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

通过 disabled 来禁用按钮，禁用状态下按钮不可点击。

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

通过 loading 设置按钮为加载状态，加载状态下认会隐藏按钮，可以通过 loading-text 设置加载状态下的。

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

通过 square 设置方形按钮，通过 round 设置圆形按钮。

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

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

<van-button icon="plus" type="primary" />
<van-button icon="plus" type="primary">按钮</van-button>
<van-button icon="https://img.yzcdn.cn/vant/user-active.png" type="info">按钮</van-button>

 large、normal、small、mini 四种尺寸，认为 normal。

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

按钮在认情况下为行内块级元素，通过 block 可以将按钮的元素类型设置为块级元素。

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

可以通过 url 进行 URL ，或通过 to 进行路由。

<van-button type="primary" url="/vant/mobile.html">URL </van-button>
<van-button type="primary" to="index">路由</van-button>

通过 color 可以按钮的颜色。

<van-button color="#7232dd">单色按钮</van-button>
<van-button color="#7232dd" plain>单色按钮</van-button>
<van-button color="linear-gradient(to right, #ff6034, #ee0a24)">渐变色按钮</van-button>

API

API使用参数介绍表

演示