Element Badge标记的使用方法


Posted in Javascript onJuly 27, 2020

组件—标记

基础用法

Element Badge标记的使用方法

<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>

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

最大值

Element Badge标记的使用方法

<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>

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

自定义内容

Element Badge标记的使用方法

<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>

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

小红点

Element Badge标记的使用方法

<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>

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

Attributes

Element Badge标记的使用方法

到此这篇关于Element Badge标记的使用方法的文章就介绍到这了,更多相关Element Badge标记内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JQuery中$之选择器用法介绍
Apr 05 Javascript
js动态切换图片的方法
Jan 20 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
JavaScript中动态向表格添加数据
Jan 24 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 #Javascript
JS倒计时两种实现方式代码实例
Jul 27 #Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 #Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 #Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 #Javascript
Element PageHeader页头的使用方法
Jul 26 #Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 #Javascript
You might like
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
js分页代码分享
2014/04/28 Javascript
js表头排序实现方法
2015/01/16 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
解决python写的windows服务不能启动的问题
2014/04/15 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
学习Python列表的基础知识汇总
2020/03/10 Python
PyTorch: Softmax多分类实战操作
2020/07/07 Python
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
《童趣》教学反思
2014/02/19 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书