rice-ui

暗黑模式

Badge 徽标（数字角标） ​

预览
01:38
组件名：rice-badge

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

注意

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

平台兼容性 ​

uni-app x ​

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

基础用法 ​

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

html
<rice-badge :value="5">
  <view class="block"></view>
</rice-badge>

<rice-badge value="Hot">
  <view class="block"></view>
</rice-badge>

<rice-badge :value="999" is-dot>
  <view class="block"></view>
</rice-badge>
css
.block {
  height: 42px;
  width: 42px;
  background-color: var(--demo-block-color-3);
  border-radius: 4px;
}

搭配组件 ​

Badge 可以搭配组件使用

html
<rice-badge :value="5">
  <rice-avatar src="/static/images/avatar.png" />
</rice-badge>

<rice-badge value="hot">
  <rice-button type="primary" size="small" text="热门商品" @click="onClick"></rice-button>
</rice-badge>

<rice-badge :value="100" :max="99">
  <rice-icon name="star-fill" size="34px" color="#d54941"/>
</rice-badge>

最大值 ​

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

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

<rice-badge :value="21" :max="20">
  <view class="block"></view>
</rice-badge>

<rice-badge :value="100" :max="99">
  <view class="block"></view>
</rice-badge>

主题色 ​

可以通过 tyep 属性设置 徽标的主题，支持 primary success warning 默认为 error

html
<rice-badge :value="5" type="primary">
  <view class="block"></view>
</rice-badge>

<rice-badge :value="10" type="success" :max="9">
  <view class="block"></view>
</rice-badge>

<rice-badge :value="39" type="warning" is-dot>
  <view class="block"></view>
</rice-badge>

自定义颜色 ​

  • 通过 bg-color 可以自定义徽标的背景色
  • 通过 color 自定义文字的颜色
html
<rice-badge :value="9" bg-color="#845ec2">
  <view class="block"></view>
</rice-badge>

<rice-badge :value="29" bg-color="#dcf2ff" color="#007aff" :max="9">
  <view class="block"></view>
</rice-badge>

<rice-badge is-dot bg-color="#ac73e1">
  <view class="block"></view>
</rice-badge>

自定义位置 ​

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

html
<rice-badge :value="5" position="bottom-right">
  <view class="block"></view>
</rice-badge>

<rice-badge :value="10" position="top-left">
  <view class="block"></view>
</rice-badge>

<rice-badge value="Hot" position="bottom-left">
  <view class="block"></view>
</rice-badge>

自定义偏移量 ​

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

html
<rice-badge :value="5" position="bottom-right" :offset="[-10,-10]">
  <view class="block"></view>
</rice-badge>

独立展示 ​

徽标支持单独使用

html
<rice-badge :value="5"></rice-badge>
<rice-badge :value="100" :max="99" type="primary"></rice-badge>
<rice-badge is-dot></rice-badge>

API ​

Props ​

属性名类型说明默认值
valueString|Number显示值，is-dot 为 false时生效；为0时且 show-zero 为 false 时隐藏-
maxNumber最大值，大于 max 时显示为 ${max}+。只有value 为数字类型时才起作用-
is-dotBoolean是否显示小圆点false
hiddenBoolean是否隐藏 Badgefalse
typeString主题类型 可选值：primary、success、warningerror
show-zeroBoolean数值为0时是否显示Badgetrue
bg-colorString背景颜色，优先级高级 type-
colorString文字颜色-
font-sizeString|Number文字大小-
positionStringBadge 的位置，默认 top-right，可选值：top-right、top-left、bottom-left、bottom-righttop-right
offsetArray偏移量，数组的两项分别对应水平向右和垂直向下的偏移量-
absoluteBoolean是否绝对定位-
badge-styleObject自定义Badge样式-

Slot ​

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

类型定义 ​

组件导出如下类型

ts
const badgeRef=ref<RiceBadgeComponentPublicInstance|null>(null)