当前位置：首页 > VUE

vue badge 实现方法

2026-02-19 00:59:32VUE

使用组件库内置徽标

多数主流 Vue UI 组件库（如 Element UI、Ant Design Vue）提供现成的徽标组件。以 Element UI 为例：

<el-badge :value="12" class="item">
  <el-button>消息</el-button>
</el-badge>

自定义 CSS 实现

通过绝对定位和样式组合创建基础徽标：

<template>
  <div class="badge-container">
    <span>通知</span>
    <span class="badge" v-if="count > 0">{{ count }}</span>
  </div>
</template>

<style>
.badge-container {
  position: relative;
  display: inline-block;
}

.badge {
  position: absolute;
  top: -8px;
  right: -12px;
  background: red;
  color: white;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 12px;
}
</style>

动态徽标内容

结合计算属性实现动态内容显示：

<script setup>
const props = defineProps({
  count: Number
})

const displayValue = computed(() => {
  return props.count > 99 ? '99+' : props.count
})
</script>

<template>
  <div class="custom-badge">
    {{ displayValue }}
  </div>
</template>

动画效果增强

添加过渡动画使徽标更醒目：

.badge-animate {
  transition: all 0.3s ease;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

SVG 高级徽标

使用 SVG 创建特殊形状徽标：

<template>
  <div class="svg-badge">
    <svg viewBox="0 0 100 100">
      <path d="M50 0 L100 50 L50 100 L0 50 Z"/>
      <text x="50" y="60">{{ count }}</text>
    </svg>
  </div>
</template>