Vant Button 按钮组件全解：类型、尺寸、禁用与事件

基础用法

Vant Button 是最常用的组件之一，支持 type、size、plain、round、disabled、loading 等属性：

<van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="danger">危险按钮</van-button>

五种 Type

• primary：品牌主色（蓝色）
• success：成功（绿色）
• warning：警告（橙色）
• danger：危险（红色）
• default：默认灰色

三种尺寸

<van-button size="large">大按钮</van-button>
<van-button size="normal">普通（默认）</van-button>
<van-button size="small">小按钮</van-button>

朴素与圆角

<van-button plain type="primary">朴素按钮</van-button>
<van-button round type="primary">圆角按钮</van-button>
<van-button square type="primary">方形按钮</van-button>

禁用与 Loading 状态

<van-button disabled type="primary">禁用按钮</van-button>
<van-button loading type="primary">加载中...</van-button>
<van-button loading loading-text="提交中" type="primary" />

Loading 状态在提交表单时特别好用——防止用户重复点击。

图标按钮

<van-button icon="plus" type="primary">新增</van-button>
<van-button icon="edit" type="primary" />
<van-button icon="search" type="primary" plain />

块级按钮与自定义颜色

<van-button block type="primary">撑满父元素宽度</van-button>
<van-button color="#7232dd">自定义背景色</van-button>
<van-button color="#7232dd" text-color="#fff">自定义文字颜色</van-button>

事件监听

<template>
  <van-button type="primary" @click="onSubmit">提交</van-button>
</template>

<script setup>
const onSubmit = () => {
  console.log("按钮被点击了");
};
</script>

实战：带防重入的提交按钮

<template>
  <van-button
    type="primary"
    block
    :loading="submitting"
    :disabled="submitting"
    @click="handleSubmit"
  >{{ submitting ? "提交中..." : "立即提交" }}
  </van-button>
</template>

<script setup>
import { ref } from "vue";
import { showToast } from "vant";

const submitting = ref(false);

const handleSubmit = async () => {
  submitting.value = true;
  try {
    // 模拟接口请求
    await new Promise((r) => setTimeout(r, 1500));
    showToast("提交成功");
  } catch (e) {
    showToast("提交失败，请重试");
  } finally {
    submitting.value = false;
  }
};
</script>

属性速查表