uniapp组件-uni-badge数字角标

官方示例：https://ext.dcloud.net.cn/plugin?id=21

数字角标通用来标记重点信息使用，如接受到新消息、有未读消息等

效果图：

代码实现：

<template>
	<view class="page">
		<uni-section title="有底色" type="line"></uni-section>
		<view style="background-color: white;padding: 20rpx;flex-direction: row;">
			<uni-badge text="1" />
			<uni-badge text="2" type="primary" />
			<uni-badge text="34" type="success" />
			<uni-badge text="45" type="warning" />
			<uni-badge text="123" type="error" />
		</view>
		<uni-section title="无底色" type="line"></uni-section>
		<view>
			<uni-badge :inverted="true" text="1" />
			<uni-badge :inverted="true" text="2" type="primary" />
			<uni-badge :inverted="true" text="34" type="success" />
			<uni-badge :inverted="true" text="45" type="warning" />
			<uni-badge :inverted="true" text="123" type="error" />
		</view>
		<uni-section title="迷你" type="line"></uni-section>
		<view>
			<uni-badge text="1" size="small" />
			<uni-badge text="2" type="primary" size="small" />
			<uni-badge text="34" type="success" size="small" />
			<uni-badge text="45" type="warning" size="small" />
			<uni-badge text="123" type="error" size="small" />
		</view>
	</view>
</template>