Vue前端开发-Vant组件之Button组件

Vant 有丰富的UI组件，而基础组件是全部组件的核心，基础组件中将常用的元素做了二次的开发，封装成Vant格式组件，如按钮、图片和布局等，这些封装后的Vant组件，提供了更多面向实际应用的属性和事件，极大地方便了开发人员的使用。

Button组件

Vant中的Button 组件从外形和状态两个方面，对原始的Button元素进行了封装，使它支持5种类型的按钮，同时，还可以自定义按钮的图标、形状、尺寸和颜色，并可以设置按钮的点击状态和是否可用性，详细的属性如下表11-1所示。 接下来通过一个完整的案例来演示Button组件的各种属性状态。

实例11-1 Button组件

功能描述

创建一个页面，使用Vant中的Button组件，分别显示不同类型、不同状态的按钮。

实现代码

在项目的components 文件夹中，添加一个名为“Button”的.vue文件，该文件的保存路径是“components/ch11/base/”，在文件中加入如清单11-1所示代码。

代码清单11-1 Button.vue代码

<template> <h3>Button 组件</h3> <div class="row"> <van-button type="primary">主要按钮</van-button> <van-button type="default">默认按钮</van-button> </div> <div class="row"> <van-button plain type="primary">朴素按钮</van-button> </div> <div class="row"> <van-button plain hairline type="primary"> 细边框按钮 </van-button> </div> <div class="row"> <van-button disabled type="primary"> 禁用状态 </van-button> </div> <div class="row"> <van-button loading type="primary" /> </div> <div class="row"> <van-button square type="primary"> 方形按钮 </van-button> </div> </template> <script> export default { } </script> <style scoped> .row { margin: 10px 0; padding: 10px 0; border-bottom: solid 1px #eee; } </style> 页面效果

保存代码后，页面在Chrome浏览器下执行的页面效果如图11-3所示。 4. 源码分析

Button 是使用最多的一款组件，通常情况下，用于数据的提交，事件的触发，当点击后，按钮则处于不可用的状态，在数据提交成功之前，按钮一直处于加载状态，提交成功之后，再次根据业务改变按钮的当前状态。