徽章角标

为了此功能的便捷性，我们以样式形式来实现徽章（并非一个组件），您可以通过重写样式来修改它们。

样式

.ux-badge 核心样式
.ux-badge-absolute 定位徽章
.ux-badge-point 红点徽章
.ux-badge-gender 性别徽章

演示代码

<template>
	<scroll-view class="ux-body ux-page-color ux-flex1">
		<text class="ux-h6 ux-color-grey ux-mt-large">普通徽章</text>
		<view class="ux-bg-white ux-border-radius ux-mt-small ux-row" 
		style="padding:20rpx">
			<text class="ux-badge demo ux-bg-grey5">8</text>
			<text class="ux-badge demo ux-bg-blue ux-color-white">11</text>
			<text class="ux-badge demo ux-bg-green ux-color-white">HOT</text>
			<text class="ux-badge demo ux-bg-red ux-color-white">99+</text>
		</view>
		<text class="ux-h6 ux-color-grey ux-mt-large">定位徽章</text>
		<view class="ux-bg-white ux-border-radius ux-mt-small ux-row" 
		style="padding:20rpx">
			<view class="demo-face ux-relative">
				<image 
				class="demo-face-image" 
				mode="aspectFill"
				:src="face"></image>
				<text class="ux-badge ux-bg-red ux-badge-absolute ux-color-white">99+</text>
			</view>
			<view class="demo-face ux-relative">
				<image 
				class="demo-face-image" 
				bgClass="ux-bg-white" 
				mode="aspectFill"
				:src="face"></image>
				<text class="ux-badge-point"></text>
			</view>
		</view>
		<text class="ux-h6 ux-color-grey ux-mt-large">性别徽章</text>
		<view class="ux-bg-white ux-border-radius ux-mt-small ux-row" 
		style="padding:20rpx">
			<view class="demo-face ux-relative">
				<image 
				class="demo-face-image" 
				mode="aspectFill"
				:src="face"></image>
				<text class="ux-bg-blue ux-badge-gender ux-color-white ux-icon">{{'\ue619'}}</text>
			</view>
			<view class="demo-face ux-relative">
				<image 
				class="demo-face-image" 
				mode="aspectFill"
				:src="face"></image>
				<text class="ux-bg-pink ux-badge-gender ux-color-white ux-icon">{{'\ue618'}}</text>
			</view>
		</view>
	</scroll-view>
</template>
<script lang="uts">
export default {
	data() {
		return {
			face : "/static/uxui/images/200x200.png"
		}
	},
	methods: {}
}
</script>
<style scoped>
.demo{margin:0 10rpx;}
.demo-face{width:100rpx; height:100rpx; margin-right:12px;}
.demo-face-image{width:100rpx; height:100rpx; border-radius:60rpx;}
</style>