编程 Javascript

Element Badge标记的使用方法

Posted in Javascript onJuly 27, 2020

组件—标记

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

Element Badge标记的使用方法

- Author -

ForeverJPB.

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

使用jQuery简化Ajax开发 Ajax开发入门

Oct 14 Javascript

需要做特殊处理的DOM元素属性的访问

Nov 05 Javascript

Javascript中设置默认参数值示例

Sep 11 Javascript

jquery实现勾选复选框触发事件给input赋值

Feb 01 Javascript

jQuery制作简洁的图片轮播效果

Apr 03 Javascript

select自定义小三角样式代码（实用总结）

Aug 18 Javascript

阿里大于短信验证码node koa2的实现代码(最新)

Sep 07 Javascript

通过一个简单的例子学会vuex与模块化

Nov 22 Javascript

Vue.js中的computed工作原理

Mar 22 Javascript

vue中v-show和v-if的异同及v-show用法

Jun 06 Javascript

Vue实现简单的拖拽效果

Aug 25 Javascript

前端监听websocket消息并实时弹出(实例代码)

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