效果如下图在线预览APIsSpace参数说明类型默认值width区域总宽度单位pxstring | number‘auto’align垂直排列方式‘stretch’ | ‘start’ | ‘end’ | ‘center’ | ‘baseline’‘start’vertical是否为垂直布局booleanfalsegap间距大小数组时表示:[水平间距, 垂直间距]number | number[] | ‘small’ | ‘middle’ | ‘large’‘middle’wrap是否自动换行仅在horizontal时有效booleantrueSlots名称说明类型default自定义内容v-slot:default创建间距组件Space.vuescript setup langtsimport{computed}fromvueexportinterfaceProps{width?:string|number// 区域总宽度单位 pxalign?:stretch|start|end|center|baseline// 垂直排列方式vertical?:boolean// 是否为垂直布局gap?:number|number[]|small|middle|large// 间距大小数组时表示: [水平间距, 垂直间距]wrap?:boolean// 是否自动换行仅在 horizontal 时有效}constpropswithDefaults(definePropsProps(),{width:auto,align:start,vertical:false,gap:middle,wrap:true})constspaceWidthcomputed((){if(typeofprops.widthnumber){return${props.width}px}returnprops.width})constgapValuecomputed((){if(typeofprops.gapnumber){return${props.gap}px}if(Array.isArray(props.gap)){return${props.gap[1]}px${props.gap[0]}px}if([small,middle,large].includes(props.gap)){constgapMap{small:8px,middle:16px,large:24px}returngapMap[props.gap]}})/scripttemplatedivclassspace-wrap:class[space-${align}, { space-vertical: vertical, space-flex-wrap: wrap }]:stylewidth: ${spaceWidth}; gap: ${gapValue}; margin-bottom: -${Array.isArray(props.gap) wrap ? props.gap[1] : 0}px;slot/slot/div/templatestyle langlessscoped.space-wrap{display:inline-flex;font-size:14px;color:rgba(0,0,0,0.88);transition:all0.3s;flex-direction:row;}.space-vertical{flex-direction:column;}.space-stretch{align-items:stretch;}.space-start{align-items:flex-start;}.space-end{align-items:flex-end;}.space-center{align-items:center;}.space-baseline{align-items:baseline;}.space-flex-wrap{flex-wrap:wrap;}/style在要使用的页面引入其中引入使用了以下组件Vue3 弹出确认PopconfirmVue3单选RadioVue3按钮ButtonVue3卡片CardVue3滑动输入条SliderVue3弹性布局Flexscript setup langtsimportSpacefrom./Space.vueimport{ref}fromvueconstgapOptionsref([{label:small,value:small},{label:middle,value:middle},{label:large,value:large},{label:customize,value:customize}])constgapSizeref(middle)constcustomGapSizeref(16)/scripttemplatedivh1{{$route.name}}{{$route.meta.title}}/h1h2classmt30 mb10基本使用/h2Space aligncenterSpaceButton typeprimaryButton/ButtonPopconfirm titleAre you sure delete this task?ok-textYescancel-textNoButtonConfirm/Button/Popconfirm/Spaceh2classmt30 mb10设置间距/h2Flex verticalRadio:optionsgapOptionsv-model:valuegapSize/Slider v-ifgapSize customizev-model:valuecustomGapSize/Space:gapgapSize ! customize ? gapSize : customGapSizeButton typeprimaryPrimary/ButtonButtonDefault/ButtonButton typedashedDashed/ButtonButton typelinkLink/Button/Space/Flexh2classmt30 mb10垂直间距/h2Space verticalCard titleCardstylewidth: 300pxpCard content/ppCard content/p/CardCard titleCardstylewidth: 300pxpCard content/ppCard content/p/Card/Spaceh2classmt30 mb10对齐/h2divclassspace-align-containerdivclassspace-align-blockSpace aligncentercenterButton typeprimaryPrimary/Buttonspanclassmock-blockBlock/span/Space/divdivclassspace-align-blockSpace alignstartstartButton typeprimaryPrimary/Buttonspanclassmock-blockBlock/span/Space/divdivclassspace-align-blockSpace alignendendButton typeprimaryPrimary/Buttonspanclassmock-blockBlock/span/Space/divdivclassspace-align-blockSpace alignbaselinebaselineButton typeprimaryPrimary/Buttonspanclassmock-blockBlock/span/Space/div/divh2classmt30 mb10自动换行/h2Space:gap[8, 16]stylewidth: 600pxtemplate v-forn in 16:keynButton typeprimaryButton/Button/template/Space/div/templatestyle langlessscoped.space-align-container{display:flex;align-items:flex-start;flex-wrap:wrap;}.space-align-block{margin:8px 4px;border:1px solid #40a9ff;padding:4px;flex:none;}.space-align-block.mock-block{display:inline-block;padding:32px 8px 16px;background:rgba(150,150,150,0.2);}/style