warst/warst-h5/components/msgNum/index.vue

<template>
	<view class="num-tips" :style="{ fontSize: `${size}px` }">
		{{ num }}
	</view>
</template>

<script>
export default {
	name: 'msgNum',
	props: {
		value: [Number, String], // 消息数量
		size: [Number, String], // 字体大小
	},
	computed: {
		num() {
			const { value } = this;
			return value > 99 ? '99+' : value;
		},
	},
};
</script>

<style scoped lang="scss">
.num-tips {
	font-size: 13px;
	padding: 1px 8rpx;
	background-color: #ff5e59;
	border-radius: 50%;
	color: #fff;
}
</style>