脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Element Badge标记

Element Badge标记的使用方法

 更新时间：2020年07月27日 09:39:07   作者：ForeverJPB.  
这篇文章主要介绍了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标记内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue.js项目在IE11白屏报错的解决方法

    Vue.js项目在IE11白屏报错的解决方法

    本文主要介绍了Vue.js项目在IE11白屏报错的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08
  • 使用vue-cli导入Element UI组件的方法

    使用vue-cli导入Element UI组件的方法

    这篇文章给大家介绍了使用vue-cli导入Element UI组件的方法，非常不错，具有一定的参考借鉴价值，需要的朋友一起看看吧
    2018-05-05
  • vue的表单数据收集案例之基本指令和自定义指令详解

    vue的表单数据收集案例之基本指令和自定义指令详解

    收集表单数据可以使用这个v-model实现这个数据的绑定，但是在有些输入框中，还需要一些其他的指令搭配这个v-model指令结合使用，这篇文章主要介绍了vue的表单数据收集，基本指令和自定义指令,需要的朋友可以参考下
    2023-01-01
  • Vue2利用Axios发起请求的详细过程记录

    Vue2利用Axios发起请求的详细过程记录

    有很多时候你在构建应用时需要访问一个API并展示其数据,做这件事的方法有好几种,而使用基于promise的HTTP客户端axios则是其中非常流行的一种,这篇文章主要给大家介绍了关于Vue2利用Axios发起请求的详细过程,需要的朋友可以参考下
    2021-12-12
  • vue实现文字滚动效果

    vue实现文字滚动效果

    这篇文章主要为大家详细介绍了vue实现文字滚动效果，公告滚动播放，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue项目中的支付功能实现(微信支付和支付宝支付)

    vue项目中的支付功能实现(微信支付和支付宝支付)

    本文主要介绍了vue项目中的支付功能实现(微信支付和支付宝支付)，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue.js路由的基本使用方式

    vue.js路由的基本使用方式

    VueRouter是Vue.js的官方路由插件,用于实现单页应用的页面切换和导航,通过安装、配置路由规则、定义路由组件和使用&amp;lt;router-link&gt;、&amp;lt;router-view&gt;标签
    2025-01-01
  • vue如何动态绑定img的src属性(v-bind)

    vue如何动态绑定img的src属性(v-bind)

    这篇文章主要介绍了vue如何动态绑定img的src属性(v-bind)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • Vue项目保持element组件同行,设置组件不自动换行问题

    Vue项目保持element组件同行,设置组件不自动换行问题

    这篇文章主要介绍了Vue项目保持element组件同行,设置组件不自动换行问题。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-02-02
  • Vue如何实现分批加载数据

    Vue如何实现分批加载数据

    这篇文章主要介绍了Vue如何实现分批加载数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04

最新评论