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

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

Button组件

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

接下来通过一个完整的案例来演示Button组件的各种属性状态。

实例11-1 Button组件

1. 功能描述

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

2. 实现代码

在项目的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>

3. 页面效果

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

4. 源码分析

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