出現(xiàn)在按鈕、圖標(biāo)旁的數(shù)字或狀態(tài)標(biāo)記。

1.如何使用？

可展示新消息數(shù)量。

//定義value屬性，它接受Number或者String。<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>

2.最大值

可自定義最大值。

//由max屬性定義，它接受一個(gè)Number，需要注意的是，只有當(dāng)value為Number時(shí)，它才會(huì)生效。<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>

3.自定義內(nèi)容

可以顯示數(shù)字以外的文本內(nèi)容。

//定義value為String類型是時(shí)可以用于顯示自定義文本。<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>

4.小紅點(diǎn)

以紅點(diǎn)的形式標(biāo)注需要關(guān)注的內(nèi)容。

//除了數(shù)字外，設(shè)置is-dot屬性，它接受一個(gè)Boolean。<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>

關(guān)于Badge 標(biāo)記，它常見于網(wǎng)站或內(nèi)容平臺(tái)的消息數(shù)量展示。?