fs-uni-template/components/fs-divide-list/fs-divide-list.vue

<template>
	<view class="fs-divide-list" :class="{ 'gutter-v': gutter }">
		<fs-grid :columnNum="list.length" :padding="false">
			<view v-for="(item, index) in list" :key="index" class="fs-divide-list-item">
				<fs-grid-item><slot :item="item"></slot></fs-grid-item>
			</view>
		</fs-grid>
	</view>
</template>

<script>
/**
 * 分割列表组件
 * @description 分割列表组件
 * @property {Array} list 分割列表
 * @property {Boolean} gutter 下边距
 */
export default {
	name: 'fs-divide-list'
}
</script>

<script setup>
const props = defineProps({
	list: {
		type: Array,
		default: () => []
	},
	gutter: Boolean
})
</script>

<style lang="scss" scoped>
.fs-divide-list {
	background-color: #fff;
	border-radius: var(--radius);

	&-item {
		position: relative;
		padding: 20rpx;
		& + & {
			&::before {
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 2rpx;
				height: 43rpx;
				background-color: #d9d9d9;
				content: '';
			}
		}
	}
}
</style>