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