更新记录

1.0.1（2026-04-02） 下载此版本

更新部分scss样式

1.0.0（2026-04-01） 下载此版本

v1.0.0 (2026-04-01)

新增

• 初始版本发布
• 基础功能
  • 支持 6 种按钮类型：primary success default warning danger info
  • 支持 4 种尺寸：large normal small mini
  • 支持朴素按钮（plain）
  • 支持细边框（hairline）
  • 支持按钮形状：round（圆形）square（方形）
  • 支持块级按钮（block）
  • 支持禁用状态（disabled）
  • 支持加载状态（loading）
• 自定义能力
  • 支持自定义颜色（color）
  • 支持自定义文字颜色（textColor）
• 多端兼容
  • 兼容 H5 端
  • 兼容小程序端
  • 兼容 App 端
  • 使用 #ifdef / #endif 条件编译处理平台差异
• 样式特性
  • 使用 SCSS 变量，适配 uni.scss 主题
  • 支持旋转加载动画
  • 支持触摸反馈效果

平台兼容性

uni-app(3.7.3)

uni-app x(3.7.3)

其他

vant-button

介绍

按钮用于触发一个操作，如提交表单。

安装

在 uni-app 项目中，可以通过以下方式使用该组件：

方式一：通过 uni_modules 安装

1. 在 HBuilderX 中打开项目
2. 点击「工具」->「插件安装」->「uni_modules」
3. 搜索并安装 vant-button 组件

方式二：手动导入

将组件文件复制到项目的 components 目录下，然后在页面中导入使用。

使用示例

基本用法

<template>
  <vant-button type="primary">主要按钮</vant-button>
  <vant-button type="success">成功按钮</vant-button>
  <vant-button type="default">默认按钮</vant-button>
  <vant-button type="danger">危险按钮</vant-button>
  <vant-button type="warning">警告按钮</vant-button>
</template>

<script setup lang="uts">
import vantButton from '@/uni_modules/vant-button/components/vant-button/vant-button.nvue';
</script>

朴素按钮

<vant-button plain type="primary">朴素按钮</vant-button>
<vant-button plain type="success">朴素按钮</vant-button>

细边框

<vant-button plain hairline type="primary">细边框按钮</vant-button>
<vant-button plain hairline type="success">细边框按钮</vant-button>

禁用状态

<vant-button disabled type="primary">禁用状态</vant-button>
<vant-button disabled type="success">禁用状态</vant-button>

加载状态

<vant-button loading type="primary" />
<vant-button loading type="primary" loading-type="spinner" />
<vant-button loading type="success" loading-text="加载中..." />

按钮形状

<vant-button square type="primary">方形按钮</vant-button>
<vant-button round type="success">圆形按钮</vant-button>

图标按钮

<vant-button icon="plus" type="primary" />
<vant-button icon="plus" type="primary">按钮</vant-button>
<vant-button icon="plus" type="primary" icon-position="right">按钮</vant-button>

按钮尺寸

<vant-button type="primary" size="large">大号按钮</vant-button>
<vant-button type="primary" size="normal">普通按钮</vant-button>
<vant-button type="primary" size="small">小型按钮</vant-button>
<vant-button type="primary" size="mini">迷你按钮</vant-button>

块级元素

<vant-button type="primary" block>块级元素</vant-button>

自定义颜色

<vant-button color="#7232dd">单色按钮</vant-button>
<vant-button color="#7232dd" plain>单色按钮</vant-button>
<vant-button color="linear-gradient(to right, #ff6034, #ee0a24)">渐变色按钮</vant-button>

页面导航

<vant-button type="primary" url="/pages/index/index">URL 跳转</vant-button>
<vant-button type="primary" to="/pages/index/index">路由跳转</vant-button>

API

Props

Events

兼容性

该组件兼容 H5、小程序和 App 多端，通过条件编译处理平台差异。

注意事项

1. 在使用图标按钮时，需要确保图标名称的正确性
2. 在使用自定义颜色时，支持传入 CSS 颜色值或渐变色
3. 在使用跳转功能时，需要确保路由路径的正确性
4. 在小程序端，按钮的样式可能会有细微差异，这是由于平台限制导致的

示例代码

完整的示例代码可以参考 pages/feature/vant-button/index.nvue 文件。