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

<template>
	<view class="fs-gutter" :style="styleStr"></view>
</template>

<script>
/**
 * 垂直间隔组件
 * @description 垂直间隔组件
 * @property {String} height 间距高度
 * @property {String} bgColor 背景色
 */
export default {
	name: 'fs-gutter'
}
</script>

<script setup>
import { computed } from 'vue'

const props = defineProps({
	height: {
		type: String,
		default: '20rpx'
	},
	bgColor: String
})

const styleStr = computed(() => {
	return `height: ${props.height};background-color:${props.bgColor}`
})
</script>

<style lang="scss" scoped>
.fs-gutter {
	width: 100%;
	background-color: var(--bg-color);
}
</style>