Vant Space 实战一个标签搞定子元素间距附源码拆解【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant表单页里摆一排确认、取消、删除按钮你得给每个按钮单独补 margin-right筛选栏里九个标签折行后行距又对不齐。Vant 4 的 Vant Space 组件就是为这类场景准备的子元素外面套一层van-space间距自动生成。Vant Space 快速接入结论先行组件注册一次van-space在整个项目里都能用。这段在入口文件安装组件import { createApp } from vue; import { Space } from vant; const app createApp(); app.use(Space);这会给 Space 挂上安装方法app.use(Space)之后模板里就能用van-space。下面这个例子包了三个操作按钮没有加任何样式van-space van-button typeprimary确认/van-button van-button typedefault取消/van-button van-button typedanger删除/van-button /van-space默认 8px 间距来自spaceProps.size的default: 8。组件给每个子元素包一层.van-space-item并注入margin-right内联样式即直接写在元素 style 属性上、优先级最高。按需引入等注册方式可看组件注册文档。源码位置advanced-usage.zh-CN.md横向、纵向与通栏三种排布Vant Space 默认横向排列换方向是一个属性通栏再开fill。根节点默认display: inline-flex行内 Flex宽度由内容决定。directionvertical会追加van-space--vertical类CSS 切到flex-direction: column子项间距自动从margin-right换成margin-bottom。想让子元素撑满整行时开filldisplay 从inline-flex变flex成为块级元素填满父容器宽度。这段是页面底部常见的通栏按钮组van-space directionvertical fill van-button typeprimary block保存草稿/van-button van-button typeprimary block提交订单/van-button /van-spacedirection管方向fill让容器块级化子元素的block把每个按钮拉到整行宽。源码位置index.lesssize 三种写法对比size接受数字、字符串和[横向, 纵向]数组三种写法覆盖绝大多数场景。传数字默认按px单位处理。传字符串则原样使用比如2rem、5vw。传数组时第一项管横向、第二项管纵向。类型归一化由getMargin方法完成数字拼上px后缀字符串保持原样。下面三个写法各配两个按钮演示van-space :size20!-- 数字20px -- van-button typeprimary确认/van-button van-button typeprimary取消/van-button /van-space van-space size2rem!-- 字符串保留单位 -- van-button typeprimary确认/van-button van-button typeprimary取消/van-button /van-space van-space :size[12, 24] wrap!-- 数组横 12px 纵 24px -- van-button typeprimary block确认/van-button van-button typeprimary block取消/van-button /van-space数组形式下getMarginStyle取size[0]作margin-right、size[1]作margin-bottom两个方向可以独立设置。源码位置Space.tsxalign 与 wrap对齐和换行细节align四个取值水平模式默认 centerwrap打开换行行距有专门处理。align可选start、center、end、baseline。mergedAlign计算属性的回退逻辑是align未传时水平模式回退center垂直模式回退空字符串不加对齐类名。各值映射为 BEMblock-element-modifier 命名约定类名van-space--align-*样式里对应align-items: flex-start / center / flex-end / baseline。这两段对比start与baseline的对齐差异用一个更高的块级元素做参照van-space alignstart stylepadding: 12px; background: #f3f2f5 van-button typeprimary确认/van-button div stylepadding: 24px 16px; background: #fff高块/div /van-space van-space alignbaseline stylepadding: 12px; background: #f3f2f5 van-button typeprimary确认/van-button div stylepadding: 24px 16px; background: #fff高块/div /van-spacealignstart时根节点拿到van-space--align-start类align-items: flex-start生效。水平模式加wrap会生成van-space--wrap类CSS 是flex-wrap: wrap。间距处理上wrap开启后最后一个子元素也保留margin-bottom保证折行后的行距稳定同时水平方向每个子元素都叠加margin-bottom作行间距所以行距和横向间距默认一致。这批筛选标签超出一行宽度wrap让它们自动折行van-space wrap :size12 van-button typeprimary block v-forn in 8标签 {{ n }}/van-button /van-space根类van-space--wrap触发flex-wrap: wrap折行后仍保持 12px 间距。源码位置index.less参数速查下表合并了 Vant Space 的全部 Props、默认插槽与类型导出最后一列是典型写法参数类型默认值说明典型写法directionvertical|horizontalhorizontal间距方向directionverticalsizenumber|string|number[]|string[]8即8px间距大小数组为[横向, 纵向]:size20/:size[12, 24]alignstart|end|center|baseline-水平回退center子元素对齐方式alignstartwrapbooleanfalse是否自动换行仅水平方向wrapfillbooleanfalse块级化并填满父元素宽度filldefault插槽-要包一层间距的内容van-space…/van-space类型SpaceProps/SpaceSize/SpaceAlign-组件导出的类型定义import type { SpaceProps } from vantSpaceSize是number | stringSpaceAlign是四值联合类型可直接给变量标注。源码三步拆解Vant Space 的全部逻辑集中在Space.tsx渲染流程分三步。子节点清洗filterEmpty递归展开 Fragment用来打包多个节点、本身没有真实 DOM 的虚拟节点过滤注释节点、空 Fragment 和纯空白文本模板里的注释与空行不会占出空位。margin 注入每个存活子元素被包进.van-space-itemgetMarginStyle依据direction与wrap计算内联样式——水平给margin-right垂直或 wrap 模式给margin-bottom末项默认返回空对象wrap开启时保留margin-bottom。BEM 类名根节点用bem()生成van-space--horizontal、van-space--vertical、van-space--align-*、van-space--wrap、van-space--fill对应声明都在index.less。入口index.ts用withInstall包装组件给组件挂安装方法app.use才能直接注册导出spaceProps与全部类型并在 vue 模块声明全局VanSpaceTS 项目因此有完整类型提示。行为有测试兜底index.spec.tsx断言默认 8px 右间距且末项无间距、垂直类名与 8px 下间距、size20px的间距、van-space--align-start与van-space--wrap类名demo.spec.ts和demo-ssr.spec.ts用快照锁住演示页渲染结果。源码位置Space.tsx、index.ts、[demo/index.vue](packages/v【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考