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

<template>
	<view class="fs-badge">
		<slot></slot>
		<view
			v-if="dot"
			class="fs-badge-dot"
			:class="['bg-' + bgColorType, { absolute: slots.default }]"
			:style="{
				backgroundColor: bgColor
			}"
		></view>
		<view
			v-else
			class="fs-badge-count"
			:class="['bg-' + bgColorType, { absolute: slots.default }]"
			:style="{
				backgroundColor: bgColor
			}"
		>
			<slot name="count">{{ value }}</slot>
		</view>
	</view>
</template>

<script>
/**
 * 徽章组件
 * @description 徽章组件
 * @property {Number} count 数字
 * @property {Boolean} dot 是否显示圆点
 * @property {String} bgColor 背景颜色
 * @property {String} bgColorType = [primary | danger | warning | info | success] 背景颜色类型
 */
export default {
	name: 'fs-badge'
}
</script>

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

const props = defineProps({
	dot: Boolean,
	count: Number,
	bgColor: String,
	bgColorType: {
		type: String,
		default: 'danger',
		validator(value) {
			return ['primary', 'success', 'info', 'warning', 'danger'].includes(value)
		}
	}
})
const value = computed(() => (props.count > 99 ? '99+' : props.count))

const slots = useSlots()
</script>

<style lang="scss" scoped>
.fs-badge {
	position: relative;
	display: inline-block;
	vertical-align: middle;

	&-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		top: -8rpx;
		right: -8rpx;
		z-index: 10;
	}
	&-count {
		color: #fff;
		font-size: 12px;
		font-weight: 500;
		padding: 0 6px;
		line-height: 36rpx;
		min-width: 36rpx;
		border-radius: 18rpx;
		text-align: center;
		box-sizing: border-box;
		white-space: nowrap;
		z-index: 10;

		&.absolute {
			top: 0;
			right: 0;
			transform: translate(50%, -50%) scale(0.8);
		}
	}
	.absolute {
		position: absolute;
	}
}
</style>