基本用法
1. 安装 Vant4 和 Button 组件：
首先，确保你已经安装了 Vant4 和相关的样式：
npm install vant@next
2. 引入 Button 组件：
在需要使用按钮的组件中，引入 Button 组件：
<template>
<vant-button @click="handleClick">点击我</vant-button>
</template>
<script>
import { ref } from 'vue';
export default {
methods: {
handleClick() {
console.log('按钮被点击了！');
}
}
};
</script>
按钮类型
Vant4 的按钮提供了不同的类型，通过设置 type 属性来实现。常见的类型有 'default'、'primary'、'info'、'warning'、'danger' 等。
<template>
<div>
<vant-button type="default">默认按钮</vant-button>
<vant-button type="primary">主要按钮</vant-button>
<vant-button type="info">信息按钮</vant-button>
<vant-button type="warning">警告按钮</vant-button>
<vant-button type="danger">危险按钮</vant-button>
</div>
</template>
按钮尺寸
Vant4 的按钮可以设置不同的尺寸，通过设置 size 属性来实现。常见的尺寸有 'large'、'normal'、'small' 等。
<template>
<div>
<vant-button size="large">大号按钮</vant-button>
<vant-button size="normal">普通按钮</vant-button>
<vant-button size="small">小号按钮</vant-button>
</div>
</template>
禁用状态
按钮可以设置为禁用状态，通过设置 disabled 属性来实现。
<template>
<vant-button disabled>禁用按钮</vant-button>
</template>
加载状态
按钮可以在进行异步操作时显示加载状态，通过设置 loading 属性来实现。
<template>
<vant-button loading>加载中...</vant-button>
</template>
这只是 Vant4 中按钮组件的一些基本用法和配置选项。你可以根据项目需要，查阅 Vant4 官方文档以获取更多详细信息和高级用法。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5789/Vant