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