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>

自定義內(nèi)容

<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">數(shù)據(jù)查詢</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標記內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue.js項目在IE11白屏報錯的解決方法
本文主要介紹了Vue.js項目在IE11白屏報錯的解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2023-08-08
使用vue-cli導入Element UI組件的方法
這篇文章給大家介紹了使用vue-cli導入Element UI組件的方法，非常不錯，具有一定的參考借鑒價值，需要的朋友一起看看吧
2018-05-05
vue的表單數(shù)據(jù)收集案例之基本指令和自定義指令詳解
收集表單數(shù)據(jù)可以使用這個v-model實現(xiàn)這個數(shù)據(jù)的綁定，但是在有些輸入框中，還需要一些其他的指令搭配這個v-model指令結(jié)合使用，這篇文章主要介紹了vue的表單數(shù)據(jù)收集，基本指令和自定義指令,需要的朋友可以參考下
2023-01-01
Vue2利用Axios發(fā)起請求的詳細過程記錄
有很多時候你在構(gòu)建應用時需要訪問一個API并展示其數(shù)據(jù),做這件事的方法有好幾種,而使用基于promise的HTTP客戶端axios則是其中非常流行的一種,這篇文章主要給大家介紹了關于Vue2利用Axios發(fā)起請求的詳細過程,需要的朋友可以參考下
2021-12-12
vue實現(xiàn)文字滾動效果
這篇文章主要為大家詳細介紹了vue實現(xiàn)文字滾動效果，公告滾動播放，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
vue項目中的支付功能實現(xiàn)(微信支付和支付寶支付)
本文主要介紹了vue項目中的支付功能實現(xiàn)(微信支付和支付寶支付)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
vue.js路由的基本使用方式
VueRouter是Vue.js的官方路由插件,用于實現(xiàn)單頁應用的頁面切換和導航,通過安裝、配置路由規(guī)則、定義路由組件和使用&lt;router-link>、&lt;router-view>標簽
2025-01-01
vue如何動態(tài)綁定img的src屬性(v-bind)
這篇文章主要介紹了vue如何動態(tài)綁定img的src屬性(v-bind)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue項目保持element組件同行,設置組件不自動換行問題
這篇文章主要介紹了Vue項目保持element組件同行,設置組件不自動換行問題。具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02
Vue如何實現(xiàn)分批加載數(shù)據(jù)
這篇文章主要介紹了Vue如何實現(xiàn)分批加載數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04