在 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-