rice-ui

暗黑模式

Badge 徽标（数字角标） ​

点击扫码预览
23:47
组件名：rice-badge
演示示例可扫模拟器状态栏上的二维码预览或 点击在线预览

在元素上显示徽标数字或小红点。

注意

由于 uniappx 中的 app 端 display 只支持 flex ，所以该组件需要在 flex 布局下进行使用，或者手动给Badge 组件的父元素设置宽度。否则徽标显示的位置可能不正确。 如果徽标显示不全，需要给 Badge 组件的父元素设置 overflow 为 visible。 具体使用方式见demo。

平台兼容性 ​

uni-app x ​

AndroidiOS鸿蒙Next微信小程序h5
√√√√√

基础用法 ​

设置 value 属性后，Badge 会在子元素的右上角显示对应的徽标，value 值可以是字符串也可以是数字。也可以通过 dot 属性来显示小红点。

html
<view class="wrapper">
	<rice-badge value="2">
	    <view class="box" :class="boxClass"></view>
	</rice-badge>

	<rice-badge value="20">
		<view class="box" :class="boxClass"></view>
    </rice-badge>

	<rice-badge value="hot">
		<view class="box" :class="boxClass"></view>
	</rice-badge>

	<rice-badge value="2" dot>
	    <view class="box" :class="boxClass"></view>
	</rice-badge>
</view>
js
import { appIsDark } from '@/store';
const boxClass = computed(() => {
    return {
		'box--dark': appIsDark.value
	}
})
css
.box {
	height: 45px;
	width: 45px;
	border-radius: 8px;
	background-color: #f2f3f5;

	&-text {
		font-size: 12px;
		color: #fff;
		margin-left: 2px;
	}

	&--dark {
		background-color: #667180;
	}
}

最大值 ​

通过 max 属性可以设置最大值，超过该值后会显示 {max}+，默认99。 注意：vulue 和 max 的值都为number 类型时才有效。

html
<view class="wrapper">
	<rice-badge :value="10" :max="9">
		<view class="box"></view>
	</rice-badge>

	<rice-badge :value="1000" :max="999">
		<view class="box"></view>
	</rice-badge>
</view>

自定义内容 ​

可以通过 content 插槽自定义徽标的内容，

html
<view class="wrapper">
	<rice-badge value="关闭">
		<view class="box"></view>
		<template #content>
			<rice-icon name="cross" color="#fff" dark-color="#fff" size="12"></rice-icon>
		</template>
	</rice-badge>

	<rice-badge value="添加">
		<view class="box"></view>
		<template #content="{value}">
			<!-- #ifdef MP-WEIXIN -->
			<view class="flex">
			<!-- #endif -->
				<rice-icon name="plus" color="#fff" dark-color="#fff" size="12"></rice-icon>
				<text class="box-text">{{value}}</text>
			<!-- #ifdef MP-WEIXIN -->
			</view>
			<!-- #endif -->
		</template>
	</rice-badge>

	<rice-badge :value="199">
		<rice-button text="搭配按钮" type="primary" size="small"></rice-button>
	</rice-badge>
</view>

自定义颜色 ​

通过 color 可以设置徽标的背景颜色，注意不是字体颜色，字体颜色可以通过 badge-style 设置。当没有传 darkColor 的值时，组件内部会自动根据 color 的值计算出对于的暗黑值。

html
<view class="wrapper">
	<rice-badge value="2" color="#1989fa">
		<view class="box"></view>
	</rice-badge>

	<rice-badge color="#e6a23c" dark-color="#07c160" value="2">
		<view class="box"></view>
	</rice-badge>
</view>

自定义位置 ​

通过 position 属性可以设置徽标展示的位置，默认为 top-right，可选 top-leftbottom-left bottom-right。

html
<view class="wrapper">
	<rice-badge value="2" position="top-left">
		<view class="box" :class="boxClass"></view>
	</rice-badge>

	<rice-badge value="2" position="bottom-left">
		<view class="box" :class="boxClass"></view>
	</rice-badge>

	<rice-badge value="2" position="bottom-right">
		<view class="box" :class="boxClass"></view>
	</rice-badge>
</view>

自定义偏移量 ​

通过 offset 属性可以设置徽标的偏移量，第一个值为水平向右的偏移量，第二个值为垂直向下的偏移量，可以简单的理解为徽标相对于当前位置要向右移动多少距离，要向下移动多少距离。数组值可以是字符串，也可以是数字。

html
<view class="wrapper">
	<rice-badge value="2" position="top-left" :offset="[0,'50%']">
		<view class="box" :class="boxClass"></view>
	</rice-badge>

	<rice-badge value="2" position="bottom-left" :offset="['50%','0px']">
		<view class="box" :class="boxClass"></view>
	</rice-badge>

	<rice-badge value="2" position="bottom-right" :offset="[0,'-50%']">
		<view class="box" :class="boxClass"></view>
	</rice-badge>
</view>

自定义样式 ​

可以通过 badge-style 属性设置徽标的宽高、 padding 等和文字的样式。

html
<view class="wrapper">
	<rice-badge :value="2" :badge-style="badgeStyle">
		<view class="box"></view>
	</rice-badge>
	<rice-badge :value="2" :badge-style="badgeStyle"></rice-badge>
</view>

<script setup>
	const badgeStyle = ref({
		padding: '4px 8px',
		fontSize: '14px',
		fontWeight: 'bold'
	})
</script>

单独使用 ​

当组件传默认插槽时，Badge 会作为一个单独的组件进行展示，此时组件也就没有相关的定位信息了，也可以传入 absolute 让组件跟随父元素进行定位。详见下方按钮 demo。

html
<view class="wrapper2">
	<rice-badge :offset="[12]">
		<template #content>
			<!-- #ifdef MP-WEIXIN -->
			<view class="flex">
			<!-- #endif -->
				<rice-icon name="cross" color="#fff" dark-color="#fff" size="12"/>
				<text class="box-text">关闭</text>
			<!-- #ifdef MP-WEIXIN -->
			</view>
			<!-- #endif -->
		</template>
	</rice-badge>
	<rice-badge :value="999" :offset="[12]" />
	<rice-badge :value="999" dot :offset="[12]" />
	<view class="box-btn">
		<rice-button type="primary" text="点击替换位置" @click="changePosition"></rice-button>
		<!-- 在app端，Badge要放在最后，不然会被兄弟元素遮挡 -->
		<rice-badge :value="99" absolute :position="position" />
	</view>

</view>

API ​

Props ​

参数说明类型默认值
value显示的值,dot 为 false 时才显示number | string-
max最大值，超过后会显示 {max}+,vulue 和 max 的值都为number 类型时才有效number99
dot是否显示小圆点booleanfalse
showZero值为数字类型的0时是否显示徽标booleantrue
offset第一个值为水平向右的偏移量，第二个值为垂直向下的偏移量array-
position徽标的位置，可选 top-left bottom-left bottom-rightstringtop-right
color徽标背景颜色string-
darkColor暗黑默认下徽标背景颜色，不传会根据 color 自动适配string-
absolute是否开启绝对定位，Badge 没有传默认插槽时，此参数才有意义booleanfalse
badgeStyle徽标的自定义样式，可设置徽标的宽高、 padding 等和文字的样式string-

Slot ​

名称说明
default徽标包裹的子元素
content自定义徽标的内容

类型定义 ​

组件导出如下类型

ts
import { BadgePosition } from "@/uni_modules/rice-ui"