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

<template>
	<view class="fs-row" :style="{ marginLeft: margin, marginRight: margin }"><slot></slot></view>
</template>

<script>
/**
 * 栅格布局组件
 * @description 栅格布局组件
 * @property {Number,String} gutter 间距(单位rpx)
 */
export default {
	name: 'fs-row'
}
</script>

<script setup>
import { computed, toRefs, provide } from 'vue'

const props = defineProps({
	gutter: {
		type: [Number, String],
		default: 0
	}
})

const margin = computed(() => `${parseInt(props.gutter) / -2}rpx`)

provide('rowGap', props.gutter)
</script>

<style lang="scss" scoped>
.fs-row::after {
	content: '';
	display: table;
	clear: both;
}
</style>