快捷導(dǎo)航

Element Badge標(biāo)記的使用方法

更新時(shí)間：2020年07月27日 09:39:07 作者：ForeverJPB.

這篇文章主要介紹了Element Badge標(biāo)記的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

組件—標(biāo)記

基礎(chǔ)用法

<el-badge :value="12" class="item">
 <el-button size="small">評論</el-button>
</el-badge>
<el-badge :value="3" class="item">
 <el-button size="small">回復(fù)</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">回復(fù)</el-button>
</el-badge>

<el-dropdown trigger="click">
 <span class="el-dropdown-link">
  點(diǎn)我查看<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">
   回復(fù)
   <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">回復(fù)</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">回復(fù)</el-button>
</el-badge>

<style>
.item {
 margin-top: 10px;
 margin-right: 40px;
}
</style>

小紅點(diǎn)

<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

到此這篇關(guān)于Element Badge標(biāo)記的使用方法的文章就介紹到這了,更多相關(guān)Element Badge標(biāo)記內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue params、query傳參使用詳解
本篇文章主要介紹了vue params、query傳參使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
VUE中常用的4種高級(jí)方法
provide/inject 是 Vue.js 中用于跨組件傳遞數(shù)據(jù)的一種高級(jí)技術(shù)，它可以將數(shù)據(jù)注入到一個(gè)組件中，然后讓它的所有子孫組件都可以訪問到這個(gè)數(shù)據(jù)，這篇文章主要介紹了VUE中常用的4種高級(jí)方法,需要的朋友可以參考下
2023-05-05
Vue項(xiàng)目啟動(dòng)后如何在瀏覽器自動(dòng)打開
這篇文章主要介紹了Vue項(xiàng)目啟動(dòng)后如何在瀏覽器自動(dòng)打開問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
實(shí)例詳解vue中的$root和$parent
這篇文章主要介紹了vue中的$root和$parent ，本文通過文字實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-04-04
利用純Vue.js構(gòu)建Bootstrap組件
這篇文章主要介紹了如何使用 Vue.js 和純 JavaScript 構(gòu)建 Bootstrap 組件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
Vue登錄主頁動(dòng)態(tài)背景短視頻制作
這篇文章主要為大家詳細(xì)介紹了Vue登錄主頁動(dòng)態(tài)背景短視頻的制作方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
詳解Vue中的filter與directive
這篇文章主要介紹了Vue中的filter與directive的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-05-05
Vue中watch使用方法詳解
watch就是當(dāng)值第一次綁定的時(shí)候，是不會(huì)執(zhí)行監(jiān)聽函數(shù)的，只有值誕生改變才會(huì)執(zhí)行。如果需要在第一次綁定的時(shí)候也執(zhí)行函數(shù)，則需要用到immediate屬性，比如當(dāng)父組件向子組件動(dòng)態(tài)傳值時(shí)，子組件props首次獲取到父組件傳來的No認(rèn)知時(shí)，也需要執(zhí)行函數(shù)
2023-01-01
Vue下拉框回顯并默認(rèn)選中隨機(jī)問題
這篇文章主要介紹了Vue下拉框回顯并默認(rèn)選中隨機(jī)問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
Vue如何接入hls/m3u8的直播視頻詳解
項(xiàng)目中有一個(gè)需求,需要實(shí)現(xiàn)直播功能,后端接口返回的是m3u8數(shù)據(jù)流,下面這篇文章主要給大家介紹了關(guān)于Vue如何接入hls/m3u8直播視頻的相關(guān)資料,需要的朋友可以參考下
2022-07-07