Button按钮也是vant自带的组件，用起来也是相当方便的。有些伙伴说除非UI设计师按照框架的模式来设计，否则框架如浮云一样。其实不然，如果你对框架研究透彻的话，即便设计师没有按照框架来设计，我们仍然可以变向使用的。

准备工作：

创建一个页面: Button.vue在router.js里配置button页面

{ path: '/button', name: 'button', component: () => import('./views/Button.vue') }

<a href="javascript:void(0)" @click="$router.push('/button')"> <van-col span="6"> <van-icon name="discount" /> <div>按钮</div> </van-col></a>

代码演示不同类型按钮：

1.按钮类型

我们进入Button.vue进行编写代码。基础型不同颜色的按钮，vant为我们提供了4种常用的按钮类型。分为默认按钮，主要按钮，警告按钮，危险按钮。具体代码为：

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

2.带边框的镂空按钮

镂空按钮只是在van-button上添加plain这个参数，就会出现没有背景色，只有边框的按钮。按钮上的颜色会与边框颜色一样。如果我们想要自定义的按钮的话，我们需要自行加上class，并设置其css样式。

<div class="tleft"> <div class="mart20 marb10"><b>带边框的镂空按钮</b></div> <van-button plain type="primary">镂空按钮1</van-button> <van-button plain type="danger">镂空按钮</van-button></div>

3.禁用按钮状态

禁用按钮是在van-button上添加参数disabled。这种状态下按钮是不可以点击的，即便绑定了click事件，也是不起任何作用的。

<div class="tleft"> <div class="mart20 marb10"><b>禁用状态</b></div> <van-button disabled type="primary">朴素按钮</van-button> <van-button disabled type="danger">朴素按钮</van-button></div>

4.加载状态

加载状态按钮是在van-button上添加参数loading。这种状态下按钮上的文字是不显示的，只会有个加载的动画，这个状态我们经常用在表单提交的时候会用到。

<div class="tleft"> <div class="mart20 marb10"><b>加载状态</b></div> <van-button loading type="primary">加载状态</van-button> <van-button loading type="danger">加载状态</van-button></div>

5.按钮形状

按钮形状我们经常会用到的是方形按钮和圆角按钮。方形按钮是在van-button上添加参数square；圆形按钮是在van-button上添加参数round。

<div class="tleft"> <div class="mart20 marb10"><b>按钮形状</b></div> <van-button square type="primary">方形按钮</van-button> <van-button round type="danger">圆形按钮</van-button></div>

6.按钮尺寸

按钮尺寸可以分为大型（即通栏按钮），普通型，小型，迷你型按钮。在van-button上设置属性size，其值为large，normal，small，mini。

如果想让按钮为通栏，有两种方式：

将按钮设置成大型按钮；在van-button上设置block参数。

<div class="tleft"> <div class="mart20 marb10"><b>按钮尺寸</b></div> <van-button size="large" type="primary" native-type="submit">大形按钮，即通栏按钮</van-button> <van-button size="normal" type="warning">普通按钮</van-button> <van-button size="small" type="danger">小型按钮</van-button> <van-button size="mini" block>迷你按钮</van-button></div>

7.绑定事件

绑定事件和在vue里一样，即为@click=""，其方法在methods里定义即可。

好，这节课就讲到这里啦，感觉是不是非常简单？即便在没有UI设计师的情况下，前端依然可以制作出一个很漂亮的页面噢！我们明天继续加油噢！