在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中,Badge 标记组件用于在元素右上角展示徽标数字或文本。虽然两者在功能和使用上非常相似,但仍然存在一些细微的差异。以下是两个版本下 Badge 组件的属性、事件和方法的详细介绍,并附有使用示例。
Vue 2 + Element UI Badge
属性 (Attributes)
value
: 显示的值,可以是数字或文本。type
: 标记的类型,用于设置不同的背景色,可选值有primary
、success
、warning
、danger
、info
、text
。offset
: 设置标记相对于右上角的位置,格式如[x, y]
。overlap
: 是否重叠到文字上。hidden
: 是否隐藏标记。dot
: 是否为小红点模式,不显示数字。max
: 最大值,超过最大值会显示{max}+
,仅当type
为数字时有效。unit
: 单位,仅在value
为数字时有效。unit-position
: 单位的位置,可选值有left
、right
&