vue2组件系列第二节：按钮

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

　　准备工作：

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

　　{

　　path: '/button',

　　name: 'button',

　　component: ()=> import('./views/Button.vue')

　　}

　　在index.vue里添加一项

　　代码演示不同类型按钮：

　　1.按钮类型

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

　　默认按钮

　　主要按钮

　　警告按钮

　　危险按钮

　　2.带边框的镂空按钮

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

带边框的镂空按钮

　　镂空按钮1

　　镂空按钮

　　3.禁用按钮状态

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

禁用状态

　　朴素按钮

　　朴素按钮

　　4.加载状态

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

加载状态

　　加载状态

　　加载状态

　　5.按钮形状

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

按钮形状

　　方形按钮

　　圆形按钮

　　6.按钮尺寸

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

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

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

按钮尺寸

　　大形按钮，即通栏按钮

　　普通按钮

　　小型按钮

　　迷你按钮

　　7.绑定事件

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

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