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

<template>
	<view class="fs-grid" :class="{ 'fs-grid-border': border }" :style="styleStr"><slot></slot></view>
</template>

<script>
/**
 * 宫格组件
 * @description 宫格组件
 * @property {Number, String} gutter 间距
 * @property {Number} columnNum 列数量
 * @property {Boolean} padding 网格项内边距
 * @property {String} bgColor 背景色
 * @property {Boolean} border 是否显示边框
 * @property {Boolean} radius 是否圆角
 */
export default {
	name: 'fs-grid'
}
</script>

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

const props = defineProps({
	gutter: {
		type: [Number, String],
		default: 0
	},
	border: Boolean,
	columnNum: {
		type: Number,
		default: 3
	},
	padding: {
		type: Boolean,
		default: true
	},
	bgColor: {
		type: String,
		default: '#fff'
	},
	radius: Boolean
})

const styleStr = computed(() => {
	return `grid-template-columns: repeat(${props.columnNum},1fr);gap:${props.gutter};`
})

provide('fsGrid', props)
provide('gridBorder', props.border)
provide('gridPadding', props.padding)
provide('gridBgColor', props.bgColor)
</script>

<style lang="scss" scoped>
.fs-grid {
	display: grid;

	&-border {
		border: 1px solid var(--border-color);
		border-bottom: none;
	}
}
</style>