mirror of
https://github.com/element-plus/element-plus.git
synced 2025-08-15 11:34:06 +08:00
ae22c959ac
* feat(components): [badge] add `icon` prop and slot * feat(components): [badge] remove icon prop * feat(components): [badge] update badge icon slot test * Update docs/en-US/component/badge.md Co-authored-by: btea <2356281422@qq.com> * Update docs/en-US/component/badge.md Co-authored-by: btea <2356281422@qq.com> * feat(components): [badge] update icon slot to content * fix(components): [badge] remove legacy icon styles * fix(docs): [badge] punctuation at the end of sentences in a document * feat(components): [badge] `value` as the value of the `content` slot * feat(docs): [badge] update badge's doc * fix(docs): [badge] content slot value type --------- Co-authored-by: btea <2356281422@qq.com>
36 lines
735 B
Vue
36 lines
735 B
Vue
<template>
|
|
<el-badge value="new" class="item">
|
|
<el-button>comments</el-button>
|
|
</el-badge>
|
|
<el-badge value="hot" class="item">
|
|
<el-button>replies</el-button>
|
|
</el-badge>
|
|
<el-badge value="99" class="item">
|
|
<el-button>share</el-button>
|
|
<template #content="{ value }">
|
|
<div class="custom-content">
|
|
<el-icon>
|
|
<Message />
|
|
</el-icon>
|
|
<span>{{ value }}</span>
|
|
</div>
|
|
</template>
|
|
</el-badge>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { Message } from '@element-plus/icons-vue'
|
|
</script>
|
|
<style scoped>
|
|
.item {
|
|
margin-top: 10px;
|
|
margin-right: 40px;
|
|
}
|
|
|
|
.custom-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
}
|
|
</style>
|