在 Vant4 中,Badge 组件用于展示微标,通常用于在其他组件上显示一些提示信息、数字或状态标记。以下是一个简单的例子,演示如何在 Vant4 中使用 Badge 组件:

首先,确保你已经安装了 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.zyzy.cn/article/detail/5828/Vant