更新记录

1.0.2（2026-08-25） 下载此版本

• 按项目新标准重构：<script setup lang="ts"> + withDefaults(defineProps) + defineEmits。
• Props 类型与默认值抽到独立 props.ts；样式抽到独立 vant-button.scss（BEM、scoped、$uni-* 令牌）。
• 移除 to / uni.navigateTo 业务耦合，仅对外 emit('click', event)，组件零业务依赖。
• 删除 .uvue，仅交付 Vue3 .vue（nvue 暂缓）。

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.8.2)

其他

vant-button 按钮

常用的操作按钮，支持多种类型、尺寸、状态与朴素/圆角等变体。

引入

经 easycom 自动注册，无需手动 import：

<template>
  <vant-button type="primary" @click="onClick">主要按钮</vant-button>
</template>

代码演示

基础用法

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

朴素按钮

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

尺寸

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

禁用与加载

<template>
  <vant-button type="primary" disabled>禁用</vant-button>
  <vant-button type="primary" loading>加载中</vant-button>
  <vant-button type="primary" loading loading-text="加载中" />
</template>

块级与图标

<template>
  <vant-button type="primary" block>块级按钮</vant-button>
  <vant-button type="primary" icon="/static/logo.png">图标按钮</vant-button>
</template>

API

Props

Events

Slots

主题定制

按钮颜色统一引用宿主 uni.scss 的 $uni-* 令牌（$uni-color-primary / $uni-color-success / $uni-color-danger 等）。自定义主题只需覆盖对应 $uni-* 变量，无需改动组件源码。

常见问题

• 如何跳转页面？ 组件只负责 UI 与 click 事件外抛，跳转逻辑由调用方处理，保持零业务耦合。
• 自定义颜色？ 通过 color / textColor prop 传入，或覆盖 $uni-* 令牌实现全局统一主题。