介绍

用于在各组件右上角显示消息数量以吸引用户处理。

引入

import Badge from 'sard-uniapp/components/badge/badge.vue'

代码演示

基础使用

徽标组件会使用一个容器包裹子元素，并将徽标定位到右上角位置。value 属性用于展示徽标的值。

<template>
  <sar-badge :value="5">
    <doc-badge-box />
  </sar-badge>
</template>

最大值

默认超过 99 的值会显示 99+，可以通过 max 配置最大显示数值

<template>
  <sar-badge :value="100">
    <doc-badge-box />
  </sar-badge>

  <sar-badge :value="100" :max="200">
    <doc-badge-box />
  </sar-badge>
</template>

值为 0 时不隐藏

默认情况下值为 0 时会隐藏徽标，可通过 showZero 属性让其值为 0 时依然显示。

<template>
  <sar-badge :value="0">
    <doc-badge-box />
  </sar-badge>

  <sar-badge :value="0" showZero>
    <doc-badge-box />
  </sar-badge>
</template>

圆点显示

使用 dot 属性可让徽标显示为小圆点。

<template>
  <sar-badge dot>
    <doc-badge-box />
  </sar-badge>
</template>

自定义颜色

可使用 color 属性配置徽标背景色，使用 textColor 配置徽标文本颜色。

<template>
  <sar-badge :value="5" color="var(--sar-blue)">
    <doc-badge-box />
  </sar-badge>

  <sar-badge dot color="var(--sar-blue)">
    <doc-badge-box />
  </sar-badge>

  <sar-badge
    :value="5"
    color="var(--sar-gray-200)"
    text-color="var(--sar-gray-800)"
  >
    <doc-badge-box />
  </sar-badge>
</template>

独立展示

当 Badge 不包裹任何东西时，不会进行定位。

<template>
  <sar-badge :value="10"></sar-badge>
  <sar-badge dot></sar-badge>
</template>

自定义内容

可以使用 value 插槽定义任何内容。

<template>
  <sar-badge>
    <template #value>
      <sar-icon name="question" color="white" />
    </template>
    <doc-badge-box />
  </sar-badge>
</template>

不包裹组件

通常使用徽标包裹组件， 如果要在结构固定的组件里添加徽标，不好包裹组件，可以给组件加个相对定位，让组件包裹徽标，并添加 fixed 属性以便定位徽标到右上角。

<template>
  <doc-badge-box>
    <sar-badge :value="5" fixed></sar-badge>
  </doc-badge-box>
</template>

API

BadgeProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
value	展示的数字	number | string	0
max	默认超过 99 的值会显示 99+，可以通过 max 设置最大显示数值	number	99
show-zero	值为 0 时，会隐藏，可通过 show-zero 让其值为 0 时依然显示	boolean	false
color	自定义背景颜色	string	-
text-color	自定义文本颜色	string	-
dot	显示圆点	boolean	false
fixed	是否定位到右上角	boolean	false

BadgeSlots

插槽	描述	属性
default	要被包裹的内容	-
value	自定义徽标内容	-

主题定制

CSS 变量

page,
.sar-portal {
  --sar-badge-height: 36rpx;
  --sar-badge-padding-x: 8rpx;
  --sar-badge-font-size: var(--sar-text-sm);
  --sar-badge-min-width: var(--sar-badge-height);
  --sar-badge-bg: var(--sar-danger);
  --sar-badge-color: var(--sar-white);
  --sar-badge-border-color: var(--sar-white);
  --sar-badge-dot-size: 20rpx;
}