标记组件 (Badge)

Element UI 的 Badge 组件用于在按钮、图标或文字旁展示一个数字或状态标记，通常用于提示未读消息、任务数量等信息。

提示

Badge 标记组件官方文档：https://element.eleme.cn/#/zh-CN/component/badge (opens new window)

1. 基本用法

基本语法：Badge 组件通过 value 属性设置显示的数值或文本，可以用于展示未读消息数量或其他提示信息。

<template>
  <el-badge :value="12">
    <el-button>评论</el-button>
  </el-badge>
</template>

在这个示例中，Badge 组件的 value 属性设置为 12，会在按钮旁边显示一个数字 12 的标记。

Badge 属性

参数	说明	类型	可选值	默认值
value	显示的值，可以是数字或字符串	string, number	—	—
max	最大值，超过此值会显示 {max}+，需 value 为 Number 类型	number	—	—
is-dot	是否只显示一个小圆点，而不是具体的数字	boolean	—	false
hidden	隐藏 Badge，不会显示任何标记	boolean	—	false
type	Badge 的类型，用于设置不同的颜色和样式	string	primary / success / warning / danger / info	—

• value：表示在标记中显示的内容，可以是数字或字符串。
• max：当 value 超过这个数值时，显示为 {max}+，如设置为 99，value 为 100 时显示 99+。
• is-dot：如果设置为 true，则不会显示具体的数字，只会显示一个小圆点。
• hidden：设置为 true 时，标记会被隐藏。
• type：Badge 的类型，可以设置为 primary、success、warning、danger、info，决定标记的颜色和样式。

示例：显示小圆点

<template>
  <el-badge is-dot>
    <el-button>消息</el-button>
  </el-badge>
</template>

在这个示例中，Badge 设置了 is-dot 属性，会在按钮旁显示一个红色的小圆点，而不是具体的数字。

示例：最大值显示

    <el-badge :value="200" :max="99" class="item">
      <el-button size="small">评论</el-button>
    </el-badge>
    <el-badge :value="100" :max="10" class="item">
      <el-button size="small">回复</el-button>
    </el-badge>

在这个示例中，Badge 的 value 设置为 120，max 设置为 99，会显示为 99+；max 设置为 10，会显示为 10+，

2. 与图标结合使用

Badge 可以和图标结合使用，展示更丰富的信息。

<template>
  <el-badge :value="3">
    <i class="el-icon-chat-dot-round"></i>
  </el-badge>
</template>

在这个示例中，Badge 包裹了一个图标，显示一个数字 3 的标记。

示例：隐藏 Badge

<template>
  <el-badge :value="100" hidden>
    <el-button>隐藏标记</el-button>
  </el-badge>
</template>

通过设置 hidden 属性为 true，可以隐藏 Badge 标记。

3. 设置标记颜色

通过 type 属性可以设置 Badge 的颜色和样式。

<template>
  <el-badge :value="3" type="primary">
    <el-button>消息</el-button>
  </el-badge>
  <el-badge :value="5" type="success">
    <el-button>成功</el-button>
  </el-badge>
  <el-badge :value="7" type="warning">
    <el-button>警告</el-button>
  </el-badge>
  <el-badge :value="9" type="danger">
    <el-button>危险</el-button>
  </el-badge>
  <el-badge :value="2" type="info">
    <el-button>信息</el-button>
  </el-badge>
</template>

这个示例展示了 Badge 的五种类型（primary、success、warning、danger、info），每种类型会有不同的颜色。

4. 结合 Slot 使用

Badge 组件支持 slot，可以将标记应用到自定义内容上。

<template>
  <el-badge :value="newMessages">
    <span>未读消息</span>    <!-- 插槽 -->
  </el-badge>
</template>

<script>
export default {
  data() {
    return {
      newMessages: 5
    };
  }
};
</script>

这个示例将标记应用到了一个 span 元素上，展示未读消息数量。

总结

• 多种样式与类型：通过 type 属性可以设置不同的样式，适用于各种场景。
• 灵活使用：支持与按钮、图标、文本等元素结合使用，可以应用在页面的各个部分。
• 动态控制：可以使用 hidden 属性来动态控制 Badge 的显示与隐藏。

5. 标记实战示例

1. 聊天应用示例

• 数据绑定：chatList 是一个数组，包含了所有的聊天会话信息，每个会话有 id、name 和 unread 字段，其中 unread 表示未读消息数量。
• 未读消息显示：使用 el-badge 组件来显示未读消息的数量，当数量超过 99 时会显示为 99+。
• 标记为已读：点击 “标记所有为已读” 按钮后，markAllAsRead 方法将所有会话的 unread 字段设置为 0，并显示提示信息。

<template>
  <div>
    <h3>聊天应用</h3>
    <el-menu>
      <el-menu-item v-for="chat in chatList" :key="chat.id">
        <el-badge :value="chat.unread" :max="99">
          <span>{{ chat.name }}</span>
        </el-badge>
      </el-menu-item>
    </el-menu>
    <div style="margin-top: 20px;">
      <el-button type="primary" @click="markAllAsRead">标记所有为已读</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chatList: [
        { id: 1, name: 'Alice', unread: 5 },
        { id: 2, name: 'Bob', unread: 0 },
        { id: 3, name: 'Charlie', unread: 12 }
      ]
    };
  },
  methods: {
    markAllAsRead() {
      this.chatList.forEach(chat => {
        chat.unread = 0; // 将所有聊天的未读消息数量设置为 0
      });
      this.$message.success('所有消息已标记为已读');
    }
  }
};
</script>

<style scoped>
/* 样式根据需求调整 */
</style>

2. 评论系统示例

• 数据绑定：posts 是一个数组，包含了所有的文章信息，每篇文章有 id、title 和 newComments 字段，其中 newComments 表示新评论的数量。
• 新评论显示：使用 el-badge 组件来显示新评论的数量，同样超过 99 时会显示为 99+。
• 查看评论：点击 “查看评论” 按钮后，viewComments 方法会弹出提示信息，表示正在查看该文章的评论，同时将 newComments 设置为 0，清除新评论标记。

<template>
  <div>
    <h3>评论系统</h3>
    <el-list>
      <el-list-item v-for="post in posts" :key="post.id">
        <el-badge :value="post.newComments" :max="99" type="primary">
          <span>{{ post.title }}</span>
        </el-badge>
        <el-button type="text" @click="viewComments(post.id)">查看评论</el-button>
      </el-list-item>
    </el-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: [
        { id: 1, title: '文章一', newComments: 3 },
        { id: 2, title: '文章二', newComments: 0 },
        { id: 3, title: '文章三', newComments: 15 }
      ]
    };
  },
  methods: {
    viewComments(postId) {
      const post = this.posts.find(p => p.id === postId);
      if (post) {
        this.$message.info(`正在查看 "${post.title}" 的评论`);
        post.newComments = 0; // 清除新评论标记
      }
    }
  }
};
</script>

<style scoped>
/* 样式根据需求调整 */
</style>