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

<template>
	<view class="fs-avatar-group"><slot></slot></view>
</template>

<script>
/**
 * 头像组组件
 * @description 头像组组件
 * @property {Number} margin 头像之间间隔
 * @property {Boolean} border 是否展示边框
 */
export default {
	name: 'fs-avatar-group'
}
</script>

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

const props = defineProps({
	margin: {
		type: Number,
		default: '-30'
	},
	border: Boolean
})

const marginLeft = computed(() => -props.margin + 'rpx')
provide('avatarGroup', props)
</script>

<style lang="scss" scoped>
.fs-avatar-group {
	margin-left: v-bind(marginLeft);
}
</style>