VanSpace 间距组件一次讲透5 个参数覆盖所有元素间距场景【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant页面里并排的按钮、标签一旦多起来逐个手写margin既容易错位也不好看。van-spaceSpace 间距组件就是为这类布局准备的把子元素包一层间距大小、方向、对齐、换行都交给它管理适合按钮组、操作栏、筛选标签等高频移动端场景。快速上手先全局注册组件其他注册方式如按需引入、自动导入插件见 advanced-usage.zh-CN.mdimport { createApp } from vue; import { Space } from vant; createApp(App).use(Space);van-space van-button typeprimary主按钮/van-button van-button typeprimary次按钮/van-button /van-space跑起来你会看到两个按钮水平排列中间自动留出8px的间隙容器本身只占内容宽度内联 Flex不会独占一行。这个 8px 不是写死在样式里的而是 Space.tsx 中spaceProps.size的default: 8在渲染时拼成margin-right注入的。垂直排列怎么配按钮变成整行通栏的一列表单底部常见提交/取消上下排列且要求按钮撑满整行。把direction设为vertical并开启fillvan-space directionvertical fill van-button typeprimary block提交/van-button van-button typeprimary block取消/van-button /van-space样式层由 index.less 完成directionvertical生成类名van-space--vertical对应flex-direction: columnfill则把容器从display: inline-flex切换为display: flex成为块级元素占满父容器宽度。此时间距改由margin-bottom承载——Space.tsx 的getMarginStyle在垂直模式下只输出marginBottom。间距不够大想用 rem 或分方向设置怎么办size接受三种形态覆盖绝大多数间距诉求van-space :size20!-- 20px --/van-space van-space size2rem!-- 带单位的字符串 --/van-space van-space :size[12, 24]!-- 横 12px / 纵 24px --/van-space源码里getMargin只做一个归一化typeof size number时拼px后缀否则原样使用。数组形态下getMarginStyle取size[0]作为margin-right、size[1]作为margin-bottom。index.spec.tsx 中size20px的断言可以佐证前两个子项的marginRight均为20px最后一项为空字符串。高度不一的子元素默认往哪边靠同一行里按钮和高块元素混排时align决定它们如何对齐可选start/center/end/baselinevan-space alignstart stylebackground: #f3f2f5; padding: 16px van-button typeprimary按钮/van-button div stylepadding: 40px 20pxBlock/div /van-spaceSpace.tsx 中的mergedAlign计算属性会在未传align时回退水平模式回退为center子元素垂直居中垂直模式回退为空字符串不追加对齐类名。传入值则映射为van-space--align-start等 BEM 类名在 index.less 中分别对应align-items: flex-start / center / flex-end / baseline。测试用例里alignstart断言的就是容器类名包含van-space--align-start。一行放不下怎么换行且换行后行距不乱 标签、筛选项这种数量不定、容易超一行的场景直接加wrap即可van-space wrap van-button typeprimary block标签一/van-button van-button typeprimary block标签二/van-button van-button typeprimary block标签三/van-button /van-spacewrap触发类名van-space--wrapflex-wrap: wrap。行距不乱的原因在getMarginStyle里开启wrap后非末项同时注入marginRight和marginBottom而末项也会保留margin-bottom普通模式末项的样式对象是空的。这样折到下一行的元素与上方行之间仍有间距末项底部也不会额外多出空白感。参数速查参数说明类型默认值direction间距方向vertical | horizontalhorizontalsize间距大小支持数组分别设置横向、纵向number | string | [SpaceSize, SpaceSize]8渲染为 8pxalign子元素对齐方式start | center | end | baseline无见下方说明wrap水平模式下是否自动换行booleanfalsefill容器是否变为块级元素、填满父容器booleanfalse插槽只有一个default放任意子元素。TS 项目可从入口 index.ts 导入SpaceProps、SpaceSize、SpaceAlign三个类型其中SpaceSize即number | string。两个容易混的点align的默认值是动态的——水平模式下等效center垂直模式下不设置任何align-items所以别以为两种模式行为对称。size传数组时[12, 24]的含义是横向 12px、纵向 24px与书写顺序[横, 纵]一致和 CSS 里margin: 上 右 下 左的习惯不同。实现原理子节点清洗filterEmpty递归展开Fragment与数组剔除注释节点、空Fragment和纯空白文本节点避免空内容占位产生多余间距。间距注入每个存活子项被包进div classvan-space-item由getMarginStyle(isLast)计算内联样式——水平方向给margin-right垂直或wrap时给margin-bottom普通模式下末项不注入。类名组装通过createNamespace(space)提供的bem函数按 BEM 规则拼装van-space、van-space--vertical、van-space--align-*、van-space--wrap、van-space--fill。注册与类型index.ts 用withInstall包装导出同时声明VanSpace全局组件类型供 TS 模板提示。组件行为有完整单测兜底index.spec.tsx 覆盖默认 8px 右间距、末项无间距、垂直排列、20px自定义间距、align与wrap类名demo.spec.ts 与 demo-ssr.spec.ts 用快照锁定 演示页 在客户端与 SSR 下的渲染结果。适用边界与选型van-space只解决一维均匀间距不做两维网格布局——子项需要行列对齐时用Grid需要复杂对齐时直接写 Flex 更合适。反过来只要目标是让一排或一列元素间距统一且可配置优先用van-space替代手写margin间距语义集中在一个属性上改值只改一处。【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考