当前位置：首页 > news >正文

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

news 来源：原创 2025/5/6 10:45:12

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>