FxBadge 徽标

出现在按钮、图标旁的数字或状态标记。不依赖任何 UI 框架，样式走 @fx/styles token。

基础用法

展示新消息数量。

<template>
  <FxBadge :value="12" class="item">
    <FxBtn>Comments</FxBtn>
  </FxBadge>
  <FxBadge :value="3" class="item">
    <FxBtn>Replies</FxBtn>
  </FxBadge>
  <FxBadge :value="1" class="item" type="primary">
    <FxBtn>Comments</FxBtn>
  </FxBadge>
  <FxBadge :value="2" class="item" type="warning">
    <FxBtn>Replies</FxBtn>
  </FxBadge>
  <FxBadge :value="1" class="item" color="green">
    <FxBtn>Custom Background</FxBtn>
  </FxBadge>
  <FxDropdown trigger="click">
    <span class="dropdown-link">
      Click Me <FxIcon name="ep:caret-bottom" />
    </span>
    <template #dropdown>
      <FxDropdownMenu>
        <FxDropdownItem class="clearfix">
          Comments <FxBadge class="mark" :value="12" />
        </FxDropdownItem>
        <FxDropdownItem class="clearfix">
          Replies <FxBadge class="mark" :value="3" />
        </FxDropdownItem>
      </FxDropdownMenu>
    </template>
  </FxDropdown>
</template>

<style scoped>
.item {
  margin-top: 10px;
  margin-right: 30px;
}

.dropdown-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  margin-top: 1.1rem;
}

.clearfix {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mark {
  margin-top: 10px;
}
</style>

数量通过 value 定义，接受 number 或 string。

最大值（max）

可自定义最大值。

<template>
  <div class="flex flex-wrap items-center gap-6">
    <FxBadge :value="200" :max="99" class="item">
      <FxBtn>Comments</FxBtn>
    </FxBadge>
    <FxBadge :value="100" :max="10" class="item">
      <FxBtn>Replies</FxBtn>
    </FxBadge>
  </div>
</template>

<style scoped>
.item {
  margin-top: 10px;
}
</style>

最大值由 max 属性（number）定义。注意：仅当 value 也是 number 时生效。

自定义内容

展示数字以外的文字内容，也可用 content 插槽自定义。

<template>
  <FxBadge value="new" class="item">
    <FxBtn>Comments</FxBtn>
  </FxBadge>
  <FxBadge value="hot" class="item">
    <FxBtn>Replies</FxBtn>
  </FxBadge>
  <FxBadge value="99" class="item">
    <FxBtn>Share</FxBtn>
    <template #content="{ value }">
      <span class="custom-content">
        <FxIcon name="ep:message" /> {{ value }}
      </span>
    </template>
  </FxBadge>
</template>

<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}

.custom-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
</style>

当 value 为 string 时展示自定义文字；也可用 content 插槽。

小红点

用红点标记需要关注的内容。

<template>
  <FxBadge is-dot class="item">Query</FxBadge>
  <FxBadge is-dot class="item">
    <FxBtn type="primary"><FxIcon name="ep:share" /></FxBtn>
  </FxBadge>
</template>

<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>

使用 is-dot 属性（布尔）。

类型（type）

primary / success / warning / info / danger（默认 danger）。

<template>
  <div class="flex flex-wrap items-center gap-6">
    <FxBadge :value="1" type="primary" class="item">
      <FxBtn>primary</FxBtn>
    </FxBadge>
    <FxBadge :value="1" type="success" class="item">
      <FxBtn>success</FxBtn>
    </FxBadge>
    <FxBadge :value="1" type="warning" class="item">
      <FxBtn>warning</FxBtn>
    </FxBadge>
    <FxBadge :value="1" type="info" class="item">
      <FxBtn>info</FxBtn>
    </FxBadge>
    <FxBadge :value="1" type="danger" class="item">
      <FxBtn>danger</FxBtn>
    </FxBadge>
  </div>
</template>

<style scoped>
.item {
  margin-top: 10px;
}
</style>

偏移（offset）

<template>
  <div class="flex flex-wrap items-center gap-6">
    <FxBadge :value="9" :offset="[10, 10]" class="item">
      <FxBtn>offset 10 10</FxBtn>
    </FxBadge>
    <FxBadge :value="9" :offset="[-4, 6]" class="item">
      <FxBtn>offset -4 6</FxBtn>
    </FxBadge>
  </div>
</template>

<style scoped>
.item {
  margin-top: 10px;
}
</style>

设置徽标偏移 [left, top]，表示相对默认位置向左、向下的偏移量。

API

Attributes

属性	说明	类型	默认值
value	显示值	string / number	''
max	最大值，超过显示 {max}+（仅 value 为 number）	number	99
is-dot	是否显示为小红点	boolean	false
hidden	是否隐藏徽标	boolean	false
type	徽标类型	'primary' | 'success' | 'warning' | 'danger' | 'info'	danger
show-zero	value 为 0 时是否显示	boolean	true
color	自定义徽标背景色	string	—
offset	徽标偏移 [left, top]	[number, number]	[0, 0]
badge-style	徽标自定义样式	CSSProperties	—
badge-class	徽标自定义类名	string	—

Slots

插槽名	说明	类型
default	自定义默认内容	—
content	自定义徽标内容	{ value: string }