更新记录

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

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

新增

• 初始化 vant-layout 布局组件库
• 新增 vant-row 栅格行组件
  • 支持 gutter 属性设置栅格间隔
  • 支持 justify 属性设置水平对齐
  • 支持 align 属性设置垂直对齐
• 新增 vant-col 栅格列组件
  • 支持 span 属性设置列宽度（1-24）
  • 支持 offset 属性设置左侧偏移
  • 支持自动继承父组件 gutter 值
• 提供完整的组件文档和示例
• 支持多端平台（H5、小程序、App、快应用）

平台兼容性

uni-app(3.8.2)

其他

vant-layout 布局

基于 Vant 设计规范的轻量栅格布局组件（Vue3 <script setup lang="ts">，零业务耦合）。

介绍

vant-layout 提供 24 栏栅格系统，由两个组件组成：

• vant-row：栅格行容器，负责水平/垂直对齐与栅格间隔（gutter）。
• vant-col：栅格列，通过 span / offset 控制占比与偏移，并从父 vant-row 自动继承 gutter。

样式令牌统一来自宿主 uni.scss 的 $uni-* 体系，无硬编码色值；组件仅做布局，不内嵌任何导航或网络请求。

基础用法

<!-- 等分三列 -->
<vant-row>
  <vant-col span="8">span: 8</vant-col>
  <vant-col span="8">span: 8</vant-col>
  <vant-col span="8">span: 8</vant-col>
</vant-row>

<!-- 带间隔 -->
<vant-row gutter="20">
  <vant-col span="8">span: 8</vant-col>
  <vant-col span="8">span: 8</vant-col>
  <vant-col span="8">span: 8</vant-col>
</vant-row>

<!-- 水平/垂直对齐 -->
<vant-row justify="space-between" align="center">
  <vant-col span="6">A</vant-col>
  <vant-col span="6">B</vant-col>
</vant-row>

<!-- 偏移 -->
<vant-row>
  <vant-col span="8" offset="8">offset: 8</vant-col>
</vant-row>

vant-row Props

vant-col Props

Events

无（纯布局组件，不对外派发事件；vant-row 仅通过 provide 向子 vant-col 下发 gutter 上下文）。

Slots

设计约束

• 仅 Vue3，不提供 Vue2 / .uvue 实现（nvue 暂缓）。
• 组件零业务耦合：纯布局，无 uni.navigateTo / uni.request 等副作用。
• 样式令牌统一使用宿主 uni.scss 的 $uni-*，无硬编码色值。
• vant-col 通过 inject('vanRow') 读取父级 gutter，无父 vant-row 时也可独立使用（gutter 为 0）。

平台兼容性

• H5 ✓
• 小程序 ✓
• App ✓