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 相关文章推荐
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 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
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
javascript 寻找错误方法整理
2014/06/15 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
js表单验证实例讲解
2016/03/31 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
Vue 进阶教程之v-model详解
2017/05/06 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
Python实现的计算器功能示例
2018/04/26 Python
python实现超市扫码仪计费
2018/05/30 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
学生党员思想汇报范文
2014/01/09 职场文书
军训感想500字
2014/02/20 职场文书
大学新生军训方案
2014/05/03 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers