Badge 徽章

按钮和图标上的数字或状态标记。

基础用法

可以用来展示新消息的数量

数量值可接受 Number 或 String

<template>
  <px-badge :value="12" class="item">
    <px-button>Badge</px-button>
  </px-badge>
  <px-badge :value="3" class="item">
    <px-button>Badge</px-button>
  </px-badge>
  <px-badge :value="1" class="item" type="primary">
    <px-button>Badge</px-button>
  </px-badge>
  <px-badge :value="2" class="item" type="warning">
    <px-button>Badge</px-button>
  </px-badge>
  <px-badge :value="1" class="item" color="green">
    <px-button>Badge</px-button>
  </px-badge>
</template>
<style scoped>
.px-badge {
  margin-right: 15px;
}
</style>

最大值

通过 max 属性设置最大值，超过最大值会显示 {max}+, 仅当 value 为 Number 时生效

<template>
  <px-badge :value="200" :max="99" class="item">
    <px-button>comments</px-button>
  </px-badge>
  <px-badge :value="100" :max="10" class="item">
    <px-button>replies</px-button>
  </px-badge>
</template>

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

自定义显示内容

除数字外, 还支持显示任何值, 或者通过 content 插槽自定义显示内容

<template>
  <px-badge value="new" class="item">
    <px-button>comments</px-button>
  </px-badge>
  <px-badge value="hot" class="item">
    <px-button>replies</px-button>
  </px-badge>
  <px-badge value="99" class="item">
    <px-button>share</px-button>
    <template #content="{ value }">
      <div class="custom-content">
        <px-icon icon="cog" color="#fff" size="20" />
        <span>{{ value }}</span>
      </div>
    </template>
  </px-badge>
</template>
<style scoped>
.item {
  margin-right: 25px;
}
</style>

小红点

通过一个小红点标记告知用户有新内容

使用 is-dot 属性设置

<template>
  <px-badge is-dot class="item">query</px-badge>
  <px-badge is-dot class="item">
    <px-button class="share-button" icon="share" type="primary" />
  </px-badge>
</template>
<style scoped>
.item {
  margin-right: 25px;
}
</style>

偏移量

设置徽章点的偏移量, 格式为 [left, top], 表示状态点从左侧和默认位置顶部的偏移

使用 offset 属性设置

<template>
  <px-badge class="item" :value="1" :offset="[10, 5]">
    <px-button> offset</px-button>
  </px-badge>
</template>

Badge API

Props

Name	Description	Type	Default
value	显示值	number | string	-
max	最大值	number	99
is-dot	是否显示小红点	boolean	false
hidden	是否隐藏	boolean	false
type	颜色类型	enum - primary | success | warning | danger | info	danger
show-zero	值为零时是否显示 Badge	boolean	true
color	自定义颜色	string	-
offset	偏移量	[number, number]	-

Slots

Name	Description
default	自定义默认内容
content	自定义显示内容