vant/docs/examples-docs/button.md

Button 按钮

使用指南

如果你已经按照快速上手中引入了整个vant，以下组件注册就可以忽略了，因为你已经全局注册了vant中的全部组件。

全局注册

你可以在全局注册Button组件，比如页面的主文件（index.js，main.js），这样页面任何地方都可以直接使用Button组件了：

import Vue from 'vue';
import { Button } from 'vant';
import 'vant/lib/vant-css/button.css';

Vue.component(Button.name, Button);

局部注册

如果你只是想在某个组件中使用，你可以在对应组件中注册Button组件，这样只能在你注册的组件中使用Button：

import { Button } from 'vant';

export default {
  components: {
    'van-button': Button
  }
};

代码演示

按钮功能

只接受primary, default, danger三种类型，默认default。

:::demo 按钮功能

<van-row>
  <van-col span="24">
    <van-button block>default</van-button>
  </van-col>
  <van-col span="24">
    <van-button type="primary" block>primary</van-button>
  </van-col>
  <van-col span="24">
    <van-button type="danger" block>danger</van-button>
  </van-col>
</van-row>

:::

禁用状态

在组件上加上disabled属性即可，此时按钮不可点击。

:::demo 禁用状态

<van-row>
  <van-col span="24">
    <van-button disabled block>diabled</van-button>
  </van-col>
</van-row>

:::

按钮尺寸

只接受large, normal, small, mini四种尺寸，默认normal。large按钮默认100%宽度。

:::demo 按钮尺寸

<van-row>
  <van-col span="24">
    <van-button size="large">large</van-button>
  </van-col>
</van-row>
<van-row>
  <van-col span="24">
    <van-button size="normal">normal</van-button>
  </van-col>
</van-row>
<van-row>
  <van-col span="24">
    <van-button size="small">small</van-button>
  </van-col>
</van-row>
<van-row>
  <van-col span="24">
    <van-button size="mini">mini</van-button>
  </van-col>
</van-row>

:::

自定义按钮标签

按钮默认是button标签，可以使用tag属性修改为一个a标签。

:::demo 自定义按钮标签

<van-row>
  <van-col span="24">
    <van-button tag="a" type="primary" href="https://www.youzan.com" target="_blank">a标签按钮</van-button>
  </van-col>
</van-row>

:::

loading按钮

loading状态的按钮。

:::demo loading按钮

<van-row>
  <van-col span="24">
    <van-button type="primary" loading block>loading</van-button>
  </van-col>
  <van-col span="24">
    <van-button loading block></van-button>
  </van-col>
</van-row>

:::

页面底部操作按钮

一般用于fixed在底部的区域或是popup弹层的底部，一般只使用primary和normal两种状态。

:::demo

<van-row>
  <van-col span="24">
    <van-button type="primary" bottom-action>立即购买</van-button>
  </van-col>
</van-row>
<van-row>
  <van-col span="12">
    <van-button bottom-action>加入购物车</van-button>
  </van-col>
  <van-col span="12">
    <van-button type="primary" bottom-action>立即购买</van-button>
  </van-col>
</van-row>

:::

API

参数	说明	类型	默认值	可选值
type	按钮类型	string	default	primary, danger
size	按钮尺寸	string	normal	large, small, mini
tag	按钮标签	string	button	a, span, ...
diabled	按钮是否禁用	boolean	false
block	按钮是否显示为块级元素	boolean	false
bottomAction	按钮是否显示为底部行动按钮，一般显示在页面底部，有特殊样式	boolean	false