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>

最大值

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

自定义内容

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

小红点

<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标记内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Element Dropdown下拉菜单的使用方法

    组件- 下拉菜单 基础用法 <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>黄金糕</

  • Element PageHeader页头的使用方法

    组件- 页头 基础 <el-page-header @back="goBack" content="详情页面"> </el-page-header> <script> export default { methods: { goBack() { console.log('go back'); } } } </script> Attributes Events Slots 到此这篇关于Element PageHeader

  • Element Breadcrumb 面包屑的使用方法

    组件- 面包屑 什么是面包屑导航 一般页面内容上方都会有一个路径导航,这个导航就是面包屑导航.例如: 上面这个图表示我们当前的页面是Breadcrumb面包屑,上一级目录是组件页面,再上一级目录是Element UI页面.当我们点击这些目录时会返回到对应的页面中去.再例如: 上面这个图表示我们当前所在的位置是活动详情页面,上一级目录是活动列表页面-以此类推. 这些就是面包屑导航. 基础用法 <el-breadcrumb separator="/"> <el-bread

  • Element NavMenu导航菜单的使用方法

    组件-导航菜单 顶栏 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2&q

  • Element Dialog对话框的使用示例

    组件- 对话框 基本用法 <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"

  • Element Steps步骤条的使用方法

    组件- 通知 基础用法 <el-steps :active="active" finish-status="success"> <el-step title="步骤 1"></el-step> <el-step title="步骤 2"></el-step> <el-step title="步骤 3"></el-step>

  • 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">回复

  • JS获取html元素的标记名实现方法

    常见的获取元素的方法有3种,分别是通过元素ID.通过标签名字和通过类名字来获取. getElementById DOM提供了一个名为getElementById的方法,这个方法将返回一个与之对应id属性的节点对象.使用的时候请注意区分大小写. 它是document对象特有的函数,只能通过其来调用该方法.其使用的方法如下: document.getElementById('demo') //demo是元素对应的ID 该方法兼容主流浏览器,甚至包括IE6+,可以大胆使用. getElementsBy

  • Element UI 自定义正则表达式验证方法

    如下所示: //指定数据中心的验证表单valiForm,验证规则rules <el-form :model="valiForm" :rules="rules" ref="valiForm" label-width="100px" class="demo-valiForm"> <el-form-item label="名称:" :label-width="for

  • python绘制散点图并标记序号的方法

    实现二维平面上散点的绘制,并可以给每个散点标记序号或者名称: import numpy as np import matplotlib.pyplot as plt x=[2.3,4.5,3,7,6.5,4,5.3] y=[5,4,7,5,5.3,5.5,6.2] n=np.arange(7) fig,ax=plt.subplots() ax.scatter(x,y,c='r') for i,txt in enumerate(n): ax.annotate(txt,(x[i],y[i])) 以上这

  • Element Input输入框的使用方法

    本文来源于Element官方文档: http://element-cn.eleme.io/#/zh-CN/component/input 基础用法 带图标的输入框(属性方式) <el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input2"> </el-input> <el-input placeholder="请输入内容&q

  • Element Rate 评分的使用方法

    组件-评分 基础用法 <div class="block"> <span class="demonstration">默认不区分颜色</span> <el-rate v-model="value1"></el-rate> </div> <div class="block"> <span class="demonstration&

  • Element InputNumber计数器的使用方法

    组件-计数器 基础用法 <template> <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number> </template> <script> export default { data() {

  • Element如何实现loading的方法示例

    目录 前言 使用 loading 的几种方式 loading 指令实现 指令 通过指令来创建 loading 代码实现 directive 创建 loading 实例 loading 动画 其他 loading 使用方式 编程式使用 组件式使用 总结 前言 互联网时代,网络“提速”日益频繁,人们打开Web或软件的速度越来越快.然而在某些情况下,难免会出现需要用户等待的时候.那么,在这种情况下,美观,有趣,又实用的加载动画,不仅能够有效地减缓用户负面情绪,让用户挺留更长的时间. 使用 loadin

  • 从0到1搭建Element的后台框架的方法步骤

    从0到1搭建Element的后台框架的方法步骤

    由于最近公司要开发一个后台管理系统,查阅了很多vue框架,本人觉得element简洁,方便,于是选择它作为我们的首选框架,并分享给大家,如果您觉得有需要改进的地方可以提出来一起探讨,Github地址.本文篇幅比较长,希望同学们可以耐心的读下去,如有不懂可以下方留言 一.初始化项目 首先全局安装的vue框架,这里是用的npm包管理工具来安装的,如果你的网不是很好的话可以先安装淘宝镜像 npm install -g cnpm -registry=https://registry.npm.taobao

  • Jquery替换已存在于element上的event的方法

    看下面code: 复制代码 代码如下: <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>TestPage</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" typ

随机推荐