fangliaoxiaochengxv/components/m-round-badge/index.vue

<template>
	<view class="m-badge-box">
		<text class="m-badge">{{getValue}}</text>
	</view>
</template>

<script>
	export default {
		// 选项上数量标签
		name: "m-badge",
		props: {
			value: {
				type: [String, Number],
				default: 0,
			},
		},
		computed: {
			getValue(){
				return  Number(this.value) > Number(this.max) ? this.max + "+" : this.value
			}
		},
		data() {
			return {
				max:99
			};
		}
	}
</script>

<style lang="scss" scoped>
	.m-badge-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 6rpx;
		box-sizing: border-box;
		left: 74rpx;
		line-height: 35rpx;
		background: #FF2923;
		border: 4rpx solid white;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.m-badge {
		font-family: 'PingFang SC';
		font-style: normal;
		font-size: 24rpx;
		min-width: 4rpx;
		height: 30rpx;
		font-weight: 500;
		padding: 0 8rpx;
		text-align: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		text-align: center;
		color: white;
		// text-overflow: -o-ellipsis-lastline;
		// overflow: hidden; //溢出内容隐藏
		// text-overflow: ellipsis; //文本溢出部分用省略号表示
		// display: -webkit-box; //特别显示模式
		// -webkit-line-clamp: 1; //行数
		// line-clamp: 1;
		// -webkit-box-orient: vertical; //盒子中内容竖直排列

		white-space: nowrap;
		// overflow: hidden;
		// text-overflow: ellipsis;
	}
</style>