forestry-wx/src/components/ut-row/ut-row.vue

<template>
	<view
		class="ut-row"
		:class="{ 'ut-row--wrap': wrap }"
		:style="rowStyle"
	>
		<slot />
	</view>
</template>

<script setup lang="ts">

interface UtRowProps {
	/** 总栅格份数，默认 30 */
	columns?: number;
	/** 列间距，字符串形式，可为数值字符串，内部转为 px */
	gap?: string | number;
	/** 是否允许换行 */
	wrap?: boolean;
}

const props = withDefaults(defineProps<UtRowProps>(), {
	columns: 30,
	gap: '16rpx',
	wrap: true,
});

const ROW_INJECT_KEY = 'ut-row-context';
// 将 gap 统一转成 px 数值
const gapPx = computed(() => {
	const val = props.gap;
	if (val === '' || val == null) return 0;
	// 使用 uView 提供的 px 转换，兼容 rpx / rpx 字符串 / 数值字符串
	// @ts-ignore
	const fn = uni?.$u?.getPx;
	if (typeof fn === 'function') return fn(val as any) || 0;
	const n = Number(val);
	return Number.isFinite(n) ? n : 0;
});

// 提供给 ut-col 使用的上下文
provide(ROW_INJECT_KEY, {
	columns: computed(() => props.columns),
	gap: gapPx,
});

// 外层行样式：用负 margin 抵消子项 padding，实现水平 / 垂直间距
const rowStyle = computed(() => {
	const g = gapPx.value;
	if (!g) return '';
	const half = `${g / 2}px`;
	return {
		marginLeft: `-${half}`,
		marginRight: `-${half}`,
		marginTop: `-${half}`,
		marginBottom: `-${half}`,
	} as any;
});

defineExpose({ ROW_INJECT_KEY });
</script>

<style scoped lang="scss">
.ut-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.ut-row--wrap {
	flex-wrap: wrap;
}
</style>