玩转Vant的第二天（最详细、保姆级Button篇）

目录

一、对于Vant的Button

（一）、按钮的基本样式：

（二）、按钮的朴素样式设置（plain）：

（三）、按钮的细边框（hairline）：

（四）、按钮的禁用状态（disabled）：

（五）、按钮的加载状态（loading）

（六）、按钮的形状（square 、round ）

（七）、带图标的按钮（icon）

（八）、按钮的大小/尺寸（size）

（九）、按钮的块级元素（block）

（十）、按钮的自定义颜色（color）

---

一、对于Vant的Button

（一）、按钮的基本样式：

        tips：以下所有代码均是官方代码，样式还需自己调整

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

---

（二）、按钮的朴素样式设置（plain）：

        顾名思义，就是将背景都变成白色并且，除了边框和文字是type的颜色或者color的颜色

        在基础样式的基础上增加一个 plain 即可

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

         在文档内，plain 是有默认值的：false

        tips：最好是按照代码的编写要求来写（一个参数对应一个值，当然可以不写，后期发现错误的时候再进行修正以及整改，下同）

---

（三）、按钮的细边框（hairline）：

        在基础样式的基础上，加一个hairline 

<van-button hairline plain="true" type="default">默认按钮</van-button>
<van-button hairline plain="true" type="primary">主要按钮</van-button>
<van-button hairline plain="true" type="info">信息按钮</van-button>
<van-button hairline plain="true" type="warning">警告按钮<