el-badge入门学习

知识点

value可以为Number类型，也可以为String类型，都可以显示出来
一般有el-badge嵌套el-button，并使用偏移量达到标记效果，如常见的未读提示效果
max设置最大value数据，必须是Number类型数据
type设置可以改变标记的颜色，和el-button的type一致，可以设置primary,warning,success,danger,info
is-dot设置后，标记设置为点，而非value的数据标记，type对is-dot依然起作用
hidden为true隐藏标记，is-dot为false，不显示红点标记
通过el-button的@click事件设置is-dot和hidden,达到已读效果
本次学习涉及到了下拉菜单的标签学习，基础标签是el-dropdown,el-dropdown-menu,el-dropdown-item,以后详细系统学习，在做讲解

效果图

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head><body><div id='app'><el-badge  :hidden="flag3" :value='value1' class='item' :max='99'><el-button size='small' @click='flag3=true'>评论</el-button></el-badge><el-badge :hidden="flag4" :value='value2' class='item' :max='10'><el-button size='small' @click='flag4=true'>回复</el-button></el-badge><el-badge :hidden="flag5" :value='value3' class='item' type="primary"><el-button size='small' @click='flag5=true'>评论</el-button></el-badge><el-badge :hidden="flag6" :value='value4' class='item' type='warning'><el-button size='small' @click='flag6=true'>回复</el-button></el-badge><el-badge :is-dot='flag1' class='item'><el-button type='text'  @click='flag1=false'>数据查询</el-button></el-badge><el-badge :is-dot='flag2' class='item'><el-button icon="el-icon-share" type='primary' @click='flag2=false'></el-button></el-badge><el-dropdown trigger='click'><span >点击查看<i class='el-icon-caret-bottom el-icon--right'></i></span><el-dropdown-menu slot='dropdown'><el-dropdown-item><el-badge :hidden='flag7' :value='value5'><el-button size='small' type='text' @click='flag7=true'>评价</el-button></el-badge></el-dropdown-item><el-dropdown-item><el-badge :hidden='flag8' :value='value6'><el-button size='small' type='text' @click='flag8=true'>回复</el-button></el-badge></el-dropdown-item></el-dropdown-menu></el-dropdown></div>
</body></html>
<style>.item {margin-top: 10px;margin-right: 40px;}
</style>
<script>new Vue({el: "#app",data() {return {value1:120,value2:18,value3:'new',value4:'hot',value5:12,value6:3,flag1:true,flag2:true,flag3:false,flag4:false,flag5:false,flag6:false,flag7:false,flag8:false,}},methods: { }})
</script>

官网

el-badge学习官网

el-badge入门学习相关推荐

java推送叮叮消息,叮叮叮！请及时签收入门学习Java导航路线
原标题:叮叮叮!请及时签收入门学习Java导航路线引言想必有很多像我一样刚学习Java会有很迷茫的人吧,今天给小伙伴们整理了一些资料,有需要的小伙伴们可以私信我,顺便推荐一个免费学习的Qqun,里 ...
messageBox的入门学习
messageBox的入门学习知识点 this.$alert用于弹出消息 this.$confirm用于确认消息,显示取消按钮 this.$prompt用于提交消息,单个数据的提交使用它,复杂的数据 ...
el-avatar入门学习
el-avatar入门学习知识点 size控制大小,可以设置Number,或者字符串large,medium,small shape控制头像形状,默认为circle,可设置为square,为方形 i ...
el-tag入门学习
el-tag入门学习知识点 type属性默认是蓝色,还可以设置success,info,warning,danger size属性默认最大,还可以设置medium,small,mini closab ...
SpringBoot入门学习（五）之旅游网站项目
目录 1.项目需求 2.技术需求 3.pom.xml 4.application.yml 4.MybatisPlus的配置文件 5.springboot中配置日期类型转换器 6.用户管理 7.线路管理 ...
el-table入门学习
el-table入门学习知识点 data为表单数据,格式为[{...},{...},{...}] border显示表格边框 fix默认为左固定,设置为"right"右固定 hei ...
el-drawer的入门学习
el-drawer的入门学习适用场景 el-drawer与el-dialog有几乎相同的API,不同的是el-dialog是居中显示,el-drawer可以根据不同的方向,在上下左右弹出显示知识点 ...
el-menu入门学习
el-menu入门学习知识点首页效果为el-menu中嵌套el-menu-item,el-menu-item中左侧图标填充,右侧文字填充部门效果为el-menu嵌套el-submenu,el-s ...
el-transfer的入门学习
el-transfer的入门学习效果图代码 <!DOCTYPE html> <html lang="en"> <head><meta ...
APNs入门学习和使用
本文为博主原创,允许转载,但请声明原文地址:http://www.coselding.cn/article/2016/12/01/APNs入门学习和使用/ APNs入门学习和使用这篇文章费了我好多心 ...

el-badge入门学习

知识点

效果图

代码

官网

el-badge入门学习相关推荐

最新文章

热门文章