更新记录

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

uni-app x(3.7.6)

vant-layout 布局

轻量、可靠的移动端布局组件，基于 Vant 设计规范。

组件列表

• vant-row - 栅格行组件
• vant-col - 栅格列组件

特性

• 24 分栏系统
• 支持灵活的水平/垂直对齐方式
• 支持自定义列间距
• 支持列偏移
• 响应式布局适配

快速开始

引入组件

在 pages.json 中配置 easycom：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^vant-(.*)": "@/uni_modules/vant-$1/components/vant-$1/vant-$1.uvue"
    }
  }
}

使用示例

<template>
  <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>
</template>

平台支持

更新日志

详见 changelog