fs-uni-template/components/fs-space/fs-space.vue

<template>
	<view class="fs-space" :class="{ 'gutter-v': gutter }" :style="{ gap: size }"><slot></slot></view>
</template>

<script>
/**
 * 间距组件
 * @description 间距组件(设置组件之间的间距)
 * @property {String} size 间距大小
 * @property {String} direction 间距方向
 * @property {String} justify 间距方向
 * @property {Boolean} gutter 下边距
 */
export default {
	name: 'fs-space'
}
</script>

<script setup>
const props = defineProps({
	size: {
		type: String,
		default: '20rpx'
	},
	direction: {
		type: String,
		default: 'row',
		validator(value) {
			return ['row', 'column'].includes(value)
		}
	},
	justify: {
		type: String,
		default: 'flex-start'
	},
	gutter: Boolean
})
</script>

<style lang="scss" scoped>
.fs-space {
	display: flex;
	flex-direction: v-bind(direction);
	flex-wrap: wrap;
	justify-content: v-bind(justify);
	align-items: center;
}
</style>