首先，确保你已经在项目中引入了 Element Plus。如果没有，你可以通过以下方式安装：
npm install element-plus
然后，在你的 Vue 组件中使用 el-badge：
<template>
<div>
<el-badge :value="badgeValue">
<el-button>带标记的按钮</el-button>
</el-badge>
<el-badge :value="5" class="badge-example">
<el-icon name="message" class="icon"></el-icon>
</el-badge>
</div>
</template>
<script>
import { ElBadge, ElButton, ElIcon } from 'element-plus';
export default {
components: {
ElBadge,
ElButton,
ElIcon,
},
data() {
return {
badgeValue: 'new',
};
},
};
</script>
<style scoped>
.badge-example {
margin-left: 20px;
}
.icon {
font-size: 24px;
line-height: 1.5;
}
</style>
在这个例子中，我们使用了 el-badge 组件，通过设置 :value 属性来显示标记的内容。可以是文本、数字或者其他内容。在这里，我们通过一个按钮和一个图标演示了两种不同的使用方式。
你可以根据实际需求自定义标记组件的样式和显示方式。
转载请注明出处：http://www.zyzy.cn/article/detail/5554/ElementPlus