fs-uni-template/components/fs-cell-group/fs-cell-group.vue

<template>
	<view
		class="fs-cell-group"
		:class="{ full, radius, 'fs-cell-group-gutter': gutter }"
		:style="{ backgroundColor: bgColor || '#fff' }"
	>
		<slot />
	</view>
</template>

<script>
/**
 * 单元格组组件
 * @description 单元格组组件
 * @property {String} titleWidth 标题宽度
 * @property {Boolean} arrow 是否显示箭头
 * @property {String} arrowColor 箭头颜色
 * @property {String} arrowColorType = [primary | danger | warning | info | success] 箭头颜色类型
 * @property {Boolean} full 是否通屏
 * @property {Boolean} border 是否显示边框
 * @property {Boolean} tighten 是否紧凑
 * @property {Boolean} gutter 是否显示间距
 * @property {Boolean} radius 是否带圆角
 * @property {Boolean} reverse 是否翻转
 * @property {String} bgColor 背景颜色
 * @property {String} align = [top | center | bottom | stretch] 垂直对齐方式
 * @property {String} justify = [left | center | right] 水平对齐方式
 */
export default {
	name: 'fs-cell-group'
}
</script>

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

const props = defineProps({
	titleWidth: String,
	arrow: Boolean,
	arrowColor: {
		type: String,
		default: ''
	},
	arrowColorType: {
		type: String,
		validator(value) {
			return ['primary', 'success', 'info', 'warning', 'danger'].includes(value)
		}
	},
	border: Boolean,
	tighten: Boolean,
	gutter: Boolean,
	radius: {
		type: Boolean,
		default: true
	},
	reverse: Boolean,
	align: {
		type: String,
		default: 'center',
		validator(value) {
			return ['top', 'center', 'bottom', 'stretch'].includes(value)
		}
	},
	justify: {
		type: String,
		default: 'left',
		validator(value) {
			return ['left', 'center', 'right'].includes(value)
		}
	},
	bgColor: {
		type: String
	},
	full: Boolean
})

provide('cellGroup', props)
</script>

<style lang="scss" scoped>
.fs-cell-group {
	margin: 0 var(--gutter);
	overflow: hidden;
	position: relative;

	&::after {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 2rpx;
		width: 100%;
		background-color: #fff;
		z-index: 10;
		content: '';
	}

	&.full {
		margin: 0;
	}

	&.radius {
		border-radius: var(--radius);
	}

	&-gutter {
		margin-bottom: var(--gutter-v);
	}
}
</style>