Button 按钮 - Vant 4
Button 按钮
🎯 介绍
按钮是用户界面中最常见的交互元素！无论是提交表单、触发操作，还是引导用户进行下一步，按钮都是不可或缺的好帮手。Vant 的按钮组件为你提供了丰富的样式和功能，让你的应用更加美观和易用。
📦 引入
通过以下方式来全局注册组件，更多注册方式请参考组件注册。
import { createApp } from 'vue';
import { Button } from 'vant';
const app = createApp();
app.use(Button);🚀 代码演示
按钮类型
Vant 为你准备了五种不同风格的按钮类型：default（默认）、primary（主要）、success（成功）、warning（警告）、danger（危险）。每种类型都有独特的颜色和含义，帮你更好地传达操作意图。
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>朴素按钮
想要一个更加简洁的按钮样式？试试朴素按钮吧！通过 plain 属性，按钮会变成白色背景，文字保持原有颜色，给人一种清爽的感觉。
<van-button plain type="primary">朴素按钮</van-button>
<van-button plain type="success">朴素按钮</van-button>细边框
追求极致的视觉效果？设置 hairline 属性可以展示 0.5px 的超细边框，让你的按钮看起来更加精致！
<van-button plain hairline type="primary">细边框按钮</van-button>
<van-button plain hairline type="success">细边框按钮</van-button>禁用状态
有时候我们需要暂时"冻结"某个按钮，比如表单验证未通过时。通过 disabled 属性，按钮会变成灰色且无法点击，清楚地告诉用户当前不可操作。
<van-button disabled type="primary">禁用状态</van-button>
<van-button disabled type="success">禁用状态</van-button>加载状态
通过 loading 属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过 loading-text 设置加载状态下的文字。
按钮形状
通过 square 设置方形按钮，通过 round 设置圆形按钮。
图标按钮
通过 icon 属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL。
按钮尺寸
支持 large、normal、small、mini 四种尺寸，默认为 normal。
块级元素
按钮在默认情况下为行内块级元素，通过 block 属性可以将按钮的元素类型设置为块级元素。
页面导航
可以通过 url 属性进行 URL 跳转，或通过 to 属性进行路由跳转。
自定义颜色
通过 color 属性可以自定义按钮的颜色。
动画按钮
搭配 Button 和 Swipe 组件，可以实现垂直滚动的动画按钮效果。
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 类型，可选值为 primary``success``warning``danger | string | default |
| size | 尺寸，可选值为 large``small``mini | string | normal |
| text | 按钮文字 | string | - |
| color | 按钮颜色，支持传入 linear-gradient 渐变色 | string | - |
| icon | 左侧图标名称或图片链接，等同于 Icon 组件的 name 属性 | string | - |
| icon-prefix | 图标类名前缀，等同于 Icon 组件的 class-prefix 属性 | string | van-icon |
| icon-position | 图标展示位置，可选值为 right | string | left | | tag | 按钮根节点的 HTML 标签 | string | button | | native-type | 原生 button 标签的 type 属性 | string | button | | block | 是否为块级元素 | boolean | false | | plain | 是否为朴素按钮 | boolean | false | | square | 是否为方形按钮 | boolean | false | | round | 是否为圆形按钮 | boolean | false | | disabled | 是否禁用按钮 | boolean | false | | hairline | 是否使用 0.5px 边框 | boolean | false | | loading | 是否显示为加载状态 | boolean | false | | loading-text | 加载状态提示文字 | string | - | | loading-type | 加载图标类型，可选值为 spinner | string | circular |
| loading-size | 加载图标大小，默认单位为 px | number | string | 20px | | url | 点击后跳转的链接地址 | string | - | | to | 点击后跳转的目标路由对象，等同于 Vue Router 的 to 属性 | string | object | - |
| replace | 是否在跳转时替换当前页面历史 | boolean | false |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击按钮，且按钮状态不为加载或禁用时触发 | event: MouseEvent |
| touchstart | 开始触摸按钮时触发 | event: TouchEvent |
Slots
| 名称 | 说明 |
|---|---|
| default | 按钮内容 |
| icon | 自定义图标 |
| loading | 自定义加载图标 |
类型定义
组件导出以下类型定义：
importtype { ButtonType, ButtonSize, ButtonProps, ButtonNativeType, ButtonIconPosition, } from'vant';主题定制
样式变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --van-button-mini-height | 24px | - |
| --van-button-mini-padding | 0 var(--van-padding-base) | - |
| --van-button-mini-font-size | var(--van-font-size-xs) | - |
| --van-button-small-height | 32px | - |
| --van-button-small-padding | 0 var(--van-padding-xs) | - |
| --van-button-small-font-size | var(--van-font-size-sm) | - |
| --van-button-normal-font-size | var(--van-font-size-md) | - |
| --van-button-normal-padding | 0 15px | - |
| --van-button-large-height | 50px | - |
| --van-button-default-height | 44px | - |
| --van-button-default-line-height | 1.2 | - |
| --van-button-default-font-size | var(--van-font-size-lg) | - |
| --van-button-default-color | var(--van-text-color) | - |
| --van-button-default-background | var(--van-background-2) | - |
| --van-button-default-border-color | var(--van-gray-4) | - |
| --van-button-primary-color | var(--van-white) | - |
| --van-button-primary-background | var(--van-primary-color) | - |
| --van-button-primary-border-color | var(--van-primary-color) | - |
| --van-button-success-color | var(--van-white) | - |
| --van-button-success-background | var(--van-success-color) | - |
| --van-button-success-border-color | var(--van-success-color) | - |
| --van-button-danger-color | var(--van-white) | - |
| --van-button-danger-background | var(--van-danger-color) | - |
| --van-button-danger-border-color | var(--van-danger-color) | - |
| --van-button-warning-color | var(--van-white) | - |
| --van-button-warning-background | var(--van-orange) | - |
| --van-button-warning-border-color | var(--van-orange) | - |
| --van-button-border-width | var(--van-border-width) | - |
| --van-button-radius | var(--van-radius-md) | - |
| --van-button-round-radius | var(--van-radius-max) | - |
| --van-button-plain-background | var(--van-white) | - |
| --van-button-disabled-opacity | var(--van-disabled-opacity) | - |
| --van-button-icon-size | 1.2em | - |
| --van-button-loading-icon-size | 20px | - |
📝 总结
Button 按钮组件是用户界面中的核心交互元素！🎯 它不仅仅是一个简单的点击区域，更是连接用户意图与应用功能的重要桥梁。从基础的文字按钮到炫酷的动画效果，Vant 的按钮组件为你提供了无限的可能性。
🎯 核心特性：
- 🎨 丰富样式：五种类型、多种尺寸、朴素风格任你选择
- 🎭 状态管理：加载、禁用、激活状态一应俱全
- 🎪 形状变化：方形、圆形、块级元素灵活切换
- 🎨 自定义颜色：支持渐变色，打造独特视觉效果
- 🚀 导航功能：URL跳转、路由导航轻松实现
- ⚡ 动画效果：配合其他组件创造惊艳的交互体验
从简单的确认操作到复杂的表单提交，从页面导航到动画展示，Button 让你的应用交互更加出色！