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

<template>
	<view class="fs-col" :class="['fs-col-' + span, { gutter }]" :style="styleStr"><slot></slot></view>
</template>

<script>
/**
 * 多选框组件
 * @description 多选框组件
 * @property {Number, String} span 列
 * @property {Boolean} gutter 是否有下边距
 */
export default {
	name: 'fs-col'
}
</script>

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

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

const rowGap = inject('rowGap')

const styleStr = computed(() => {
	const padding = parseInt(rowGap) / 2
	return padding ? `padding-left: ${padding}rpx;padding-right: ${padding}rpx;` : ''
})
</script>

<style lang="scss" scoped>
@use "sass:math";

.fs-col {
	float: left;

	&.gutter {
		margin-bottom: var(--gutter-v);
	}
}
@for $i from 1 through 12 {
	.fs-col-#{$i} {
		width: math.div(100%, 12) * $i;
	}
}
</style>