027_Badge标记

最新推荐文章于 2025-04-30 16:29:08 发布

自由与束缚JavaJavaScript

最新推荐文章于 2025-04-30 16:29:08 发布

阅读量878

点赞数

CC 4.0 BY-SA版权

分类专栏： element-ui 文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/123126536

element-ui 专栏收录该内容

57 篇文章

订阅专栏

本文详细介绍了Element UI中的Badge组件，包括其基本用法、最大值设定、自定义内容和小红点标记等特性，并通过示例展示了如何在项目中使用Badge组件，如在按钮旁展示新消息数量、自定义文本和小红点提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. Badge标记

1.1. Badge标记出现在按钮、图标旁的数字或状态标记。

1.2. Attributes

参数	说明	类型	可选值	默认值
value	显示值	string, number	无	无
max	最大值, 超过最大值会显示'{max}+', 要求value是Number类型	number	无	无
is-dot	小圆点	boolean	无	false
hidden	隐藏badge	boolean	无	false
type	类型	string	primary / success / warning / danger / info	无

2. Badge标记例子

2.1. 使用脚手架新建一个名为element-ui-badge的前端项目, 同时安装Element插件。

2.2. 在components在新建Badge.vue

<template>
  <div>
    <h1>基础用法-展示新消息数量</h1>
    <h4>定义value属性, 它接受Number或者String。type设置Badge类型。</h4>
    <el-badge :value="12" class="item"><el-button size="small">评论</el-button></el-badge>
    <el-badge :value="3" class="item"><el-button size="small">回复</el-button></el-badge>
    <el-badge :value="1" class="item" type="primary"><el-button size="small">评论</el-button></el-badge>
    <el-badge :value="2" class="item" type="warning"><el-button size="small">回复</el-button></el-badge>

    <el-dropdown trigger="click">
      <span class="el-dropdown-link">点我查看<i class="el-icon-caret-bottom el-icon--right"></i></span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item class="clearfix">评论<el-badge class="mark" :value="12" /></el-dropdown-item>
        <el-dropdown-item class="clearfix">回复<el-badge class="mark" :value="3" /></el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <h1>最大值-可自定义最大值</h1>
    <h4>由max属性定义, 它接受一个Number, 需要注意的是, 只有当value为Number时, 它才会生效。</h4>
    <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>

    <h1>自定义内容-可以显示数字以外的文本内容</h1>
    <h4>定义value为String类型是时可以用于显示自定义文本。</h4>
    <el-badge value="new" class="item"><el-button size="small">评论</el-button></el-badge>
    <el-badge value="hot" class="item"><el-button size="small">回复</el-button></el-badge>

    <h1>小红点-以红点的形式标注需要关注的内容</h1>
    <h4>除了数字外, 设置is-dot属性, 它接受一个Boolean。</h4>
    <el-badge is-dot class="item">数据查询</el-badge>
    <el-badge is-dot class="item">
      <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>
    </el-badge>
  </div>
</template>

<style>
.item {
  margin-top: 10px;
  margin-right: 40px;
}
</style>

2.3. 访问http://localhost:8080/#/Badge