Badge 徽章

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

基础用法

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

数量值可接受 Number 或 String

<template>
  <px-badge :value="12" class="item">
    <px-button>Badge</px-button>
  </px-badge>
  <px-badge :value="3" class="item" type="primary">
    <px-button>Badge</px-button>
  </px-badge>
  <px-badge :value="1" class="item" type="success">
    <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" type="sakura">
    <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>

自定义颜色

您可以自定义徽章的颜色。

组件库将自动计算徽章的颜色。

TIP

由于技术力问题, 请勿对此功能抱有太高期望, 如果希望实现自定义主题, 更加推荐直接修改 @property 属性, 详情见下述

<template>
  <px-badge :value="12" class="item" color="#626aef">
    <px-button color="#626aef">Badge</px-button>
  </px-badge>
  <px-badge :value="3" class="item" color="#dfee56">
    <px-button color="#dfee56">Badge</px-button>
  </px-badge>
  <px-badge :value="1" class="item" color="#fadbe0">
    <px-button color="#fadbe0">Badge</px-button>
  </px-badge>
  <px-badge :value="1" class="item" color="green">
    <px-button color="green">Badge</px-button>
  </px-badge>
  <br />
  <br />
  <px-badge :value="1" class="item paint-badge">
    <px-button class="paint-button">Badge</px-button>
  </px-badge>
</template>
<style scoped>
.px-badge {
  margin-right: 15px;
}
.paint-badge.px-badge {
  --px-badge-text-color: #554562;
  --px-badge-border-color: #554562;
}
:deep(.px-badge__content) {
  --px-badge-bg-color: #fadbe0;
  --px-badge-bg-shadow-color: #eaadbd;
}
.paint-button.px-button {
  --px-button-text-color: #554562;
  --px-border-color: #554562;
  --px-bg-color: #fadbe0;
  --px-bg-shadow-color: #eaadbd;
}
</style>

API_Table插件测试

DANGER

该插件基于 markdown-it 开发, 解析组件 types.ts 文件生成 API 表格, 测试中

Badge API

Props

Name	Description	Type	Default
value	徽章显示内容/值	string | number	-
max	超过最大值显示max+,仅当 value 为 number 时有效	number	99
isDot	是否启用圆点模式	boolean	false
hidden	是否启用隐藏	boolean	false
type	徽章类型	enum	danger
showZero	值为零时是否展示徽章	boolean	true
color	自定义颜色	string	-
offset	偏移量	[number, number]	-

Slots

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