出现在按钮、图标旁的数字或状态标记。
基础用法
展示新消息数量。
定义value
属性,它接受Number
或者String
。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <el-badge :value="12" class="item"> 2 <el-button size="small">评论</el-button> 3 </el-badge> 4 <el-badge :value="3" class="item"> 5 <el-button size="small">回复</el-button> 6 </el-badge> 7 8 <el-dropdown trigger="click"> 9 <span class="el-dropdown-link"> 10 点我查看<i class="el-icon-caret-bottom el-icon--right"></i> 11 </span> 12 <el-dropdown-menu slot="dropdown"> 13 <el-dropdown-item class="clearfix"> 14 评论 15 <el-badge class="mark" :value="12" /> 16 </el-dropdown-item> 17 <el-dropdown-item class="clearfix"> 18 回复 19 <el-badge class="mark" :value="3" /> 20 </el-dropdown-item> 21 </el-dropdown-menu> 22 </el-dropdown> 23 24 <style> 25 .item { 26 margin-top: 10px; 27 margin-right: 40px; 28 } 29 </style>
最大值
可自定义最大值。
由max
属性定义,它接受一个Number
,需要注意的是,只有当value
为Number
时,它才会生效。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <el-badge :value="200" :max="99" class="item"> 2 <el-button size="small">评论</el-button> 3 </el-badge> 4 <el-badge :value="100" :max="10" class="item"> 5 <el-button size="small">回复</el-button> 6 </el-badge> 7 8 <style> 9 .item { 10 margin-top: 10px; 11 margin-right: 40px; 12 } 13 </style>
自定义内容
可以显示数字以外的文本内容。
定义value
为String
类型是时可以用于显示自定义文本。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <el-badge value="new" class="item"> 2 <el-button size="small">评论</el-button> 3 </el-badge> 4 <el-badge value="hot" class="item"> 5 <el-button size="small">回复</el-button> 6 </el-badge> 7 8 <style> 9 .item { 10 margin-top: 10px; 11 margin-right: 40px; 12 } 13 </style>
小红点
以红点的形式标注需要关注的内容。
除了数字外,设置is-dot
属性,它接受一个Boolean
。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <el-badge is-dot class="item">数据查询</el-badge> 2 <el-badge is-dot class="item"> 3 <el-button class="share-button" icon="el-icon-share" type="primary"></el-button> 4 </el-badge> 5 6 <style> 7 .item { 8 margin-top: 10px; 9 margin-right: 40px; 10 } 11 </style>
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value | 显示值 | string, number | — | — |
max | 最大值,超过最大值会显示 '{max}+',要求 value 是 Number 类型 | number | — | — |
is-dot | 小圆点 | boolean | — | false |
hidden | 隐藏 badge | boolean | — | false |