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

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

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

組件—標(biāo)記

基礎(chǔ)用法

<el-badge :value="12" class="item">
 <el-button size="small">評(píng)論</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">評(píng)論</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">
   評(píng)論
   <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">評(píng)論</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">評(píng)論</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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

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