在 Vue 2 和 Vue 3 中，Element UI 和 Element Plus 提供了类似的 Badge 标记组件，用于给元素一个额外的状态标识。不过，需要注意的是，在 Vue 2 中，我们通常使用 Element UI，而在 Vue 3 中，我们则使用 Element Plus。虽然这两个库的功能相似，但在一些属性和实现细节上可能存在差异。
Vue 2 + Element UI Badge 标记组件
在 Vue 2 中，Element UI 的 Badge 标记组件主要用于显示数字或文本，通常用于显示未读消息的数量或某种状态。
属性（Props）
value：显示的值，可以是数字或字符串。max：最大值，当value为数字且大于max时，显示${max}+。is-dot：是否用点展示。type：类型，用于设置不同的背景色。class-name：自定义类名。
事件（Events）
Element UI 的 Badge 组件在 Vue 2 中并没有定义特定的事件。
方法（Methods）
Badge 组件在 Vue 2 的 Element UI 中没有直接暴露任何方法供外部调用。
示例
<template>
<el-badge :value="12" :max="99">
<span class="el-badge__content">消息</span>
</el-badge>
<el-badge is-dot>
<span class="el-badge__content">未读</span>
</el-badge>
</template>
<script>
export default {
// ...
};
</script>
Vue 3 + Element Plus Badge 标记组件
在 Vue 3 中，Element Plus 的 Badge 标记组件与 Vue 2 中的 Element UI 类似，但可能有一些细微的差别或新增功能。
属性（Props）
value：显示的值，可以是数字或字符串。max：最大值，当value为数字且大于max时，显示${max}+。is-dot：是否用点展示。type：类型，用于设置不同的背景色。color：自定义颜色。show-zero：是否显示数值为 0 的 Badge。
请注意，Element Plus 的属性可能会随着版本更新而发生变化，因此最好查阅最新的官方文档。
事件（Events）
Element Plus 的 Badge 组件在 Vue 3 中同样没有定义特定的事件。
方法（Methods）
Badge 组件在 Vue 3 的 Element Plus 中也没有直接暴露任何方法供外部调用。
示例
<template>
<el-badge :value="12" :max="99">
<span class="item">消息</span>
</el-badge>
<el-badge is-dot>
<span class="item">未读</span>
</el-badge>
</template>
<script setup>
// 在 Vue 3 中使用 script setup 语法
// ...
</script>
<style>
.item {
margin-right: 20px;
}
</style>
在这个 Vue 3 + Element Plus 的示例中，我们使用了与 Vue 2 类似的 Badge 组件，但使用了 Vue 3 的 <script setup> 语法。请注意，Element Plus 的样式和类名可能与 Element UI 略有不同，但在这个例子中，我们主要关注 Badge 组件的用法。