027_Badge标记

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

027_Badge标记相关推荐

CodeGen标记循环
CodeGen标记循环标记循环是一个模板文件构造,它允许您迭代CodeGen拥有的标记信息的集合.为了使用标记循环,必须基于至少定义了一个字段标记的存储库结构生成代码. 标记循环由一对匹配的< ...
CodeGen编写自定义表达式标记
CodeGen编写自定义表达式标记 CodeGen支持开发人员通过编写plug-in modules插件模块来定义自定义表达式标记的能力,以提供与这些标记相关联的逻辑.这种plug-in module ...
人脸标记检测：ICCV2019论文解析
人脸标记检测:ICCV2019论文解析 Learning Robust Facial Landmark Detection via Hierarchical Structured Ensemble 论 ...
java的标记接口_Java中的标记接口？
我被教授,Java中的Marker接口是一个空接口,用于向编译器或JVM发送信号,实现此接口的类的对象必须以特殊方式处理,如序列化,克隆等. 但最近我了解到,它实际上与编译器或JVM无关.例如,在Se ...
html5标记汇总,HTML标记汇总(1)_HTML教程
1 说明:注释标记,在""之间的内容将不在浏览器中显示. 2 说明:描述文件所符合的HTML DTD,用于对文件的兼容性作简要说明. 3 ACCESSKEY=key CLASS=c ...
html标记汇总,HTML标记语法汇总.doc
HTML标记语法大全.txt35温馨是大自然的一抹色彩,独具慧眼的匠师才能把它表现得尽善尽美:温馨是乐谱上的一个跳动音符,感情细腻的歌唱者才能把它表达得至真至纯批注跑马灯 ...普通卷动 ...滑 ...
根据坐标如何标记图片_如何玩转FloodFill算法？
读完本文,你可以去力扣拿下如下题目: 733.图像渲染 ----------- 啥是 FloodFill 算法呢,最直接的一个应用就是「颜色填充」,就是 Windows 绘画本中那个小油漆桶的标志,可 ...
控制服务器信息不存在或已删除,错误1075：依存服务不存在，或已标记为删除的解决方法...
错误1075:依存服务不存在, 或已标记为删除的解决方法 2020年09月09日 | 萬仟网科技 | 我要评论错误1075:依存服务不存在, 或已标记为删除的解决方法今天帮客户配置服务器的时候,启动 ...
java cms 垃圾回收_Java 9 或将放弃 CMS（并发标记清除垃圾收集器）
原标题:Java 9 或将放弃 CMS(并发标记清除垃圾收集器) 近日,JEP 291 再次被 Java 开发团队提上日程.先来看看该 JEP. JEP 291: Deprecate the Conc ...

027_Badge标记

027_Badge标记相关推荐

最新文章

热门文章