el-badge详解

el-badge 是 Element Plus 框架中的一个徽标组件，用于显示数字或状态标记。它常用于通知、购物车数量等场景。

一。 el-badge 属性详解

1. value:

   • 类型: Number | String
   • 用途: 徽标的值。
   • 默认值: —

2. max:

   • 类型: Number
   • 用途: 最大值，超过此值会显示为 max+。
   • 默认值: —

3. is-dot:

   • 类型: Boolean
   • 用途: 是否显示为小圆点。
   • 默认值: false

4. hidden:

   • 类型: Boolean
   • 用途: 是否隐藏徽标。
   • 默认值: false

5. type:

   • 类型: String
   • 用途: 徽标的类型，可选值为 success、warning、info、danger。
   • 默认值: —

6. color:

   • 类型: String
   • 用途: 自定义徽标的颜色。
   • 默认值: —

二。 el-badge 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 自定义徽标的内容。

三。 el-badge 事件详解

1. click:

   • 类型: Function
   • 用途: 徽标被点击时触发的回调函数。
   • 参数: event（点击事件）

四。实例

<template>
  <div>
    <h2>Badge 示例</h2>

    <!-- 基本用法 -->
    <el-badge :value="12" class="item">
      <el-button type="primary">评论</el-button>
    </el-badge>

    <!-- 最大值限制 -->
    <el-badge :value="200" :max="99" class="item">
      <el-button type="primary">通知</el-button>
    </el-badge>

    <!-- 小圆点 -->
    <el-badge is-dot class="item">
      <el-button type="primary">消息</el-button>
    </el-badge>

    <!-- 隐藏徽标 -->
    <el-badge :value="10" :hidden="true" class="item">
      <el-button type="primary">隐藏徽标</el-button>
    </el-badge>

    <!-- 自定义类型 -->
    <el-badge value="new" type="success" class="item">
      <el-button type="primary">成功</el-button>
    </el-badge>

    <!-- 自定义颜色 -->
    <el-badge value="10" color="#f56c6c" class="item">
      <el-button type="primary">自定义颜色</el-button>
    </el-badge>

    <!-- 动态更新徽标值 -->
    <el-button type="primary" @click="increaseCount">增加徽标值</el-button>
    <el-badge :value="count" class="item">
      <el-button type="primary">动态徽标</el-button>
    </el-badge>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)

const increaseCount = () => {
  count.value += 1
}
</script>