首先，确保你已经安装了 Vant4 和 Vue.js。你可以通过 npm 或 yarn 安装：
npm install vant@next
# 或
yarn add vant@next
然后，在你的 Vue 组件中，可以像这样使用 Badge 组件：
<template>
<div>
<!-- 使用 vant-badge 组件 -->
<van-badge :content="badgeContent">
<van-icon name="chat" />
</van-badge>
</div>
</template>
<script>
import { ref } from 'vue';
import { Badge, Icon } from 'vant';
export default {
components: {
[Badge.name]: Badge,
[Icon.name]: Icon,
},
setup() {
// 使用 ref 创建一个响应式变量，用于设置微标的内容
const badgeContent = ref(5);
return {
badgeContent,
};
},
};
</script>
在这个例子中，我们使用了 van-badge 组件，通过 :content 属性设置微标的内容，然后在微标中嵌套了 van-icon 组件。这里使用的图标是 Vant 提供的 chat 图标，你可以根据需要选择其他图标。
当 badgeContent 的值发生变化时，微标上显示的内容也会相应更新。你可以根据具体的需求调整微标的样式、位置以及显示的内容。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5828/Vant