vant/docs/examples-docs/badge.md

Badge 徽章

使用指南

如果你已经按照快速上手中引入了整个vant，以下组件注册就可以忽略了，因为你已经全局注册了vant中的全部组件。

全局注册

你可以在全局注册Badge组件，比如页面的主文件（index.js，main.js），这样页面任何地方都可以直接使用Badge组件了：

import Vue from 'vue';
import { Badge, BadgeGroup } from 'vant';
import 'vant/lib/vant-css/badge.css';

Vue.component(Badge.name, Badge);
Vue.component(BadgeGroup.name, BadgeGroup);

局部注册

如果你只是想在某个组件中使用，你可以在对应组件中注册Badge组件，这样只能在你注册的组件中使用Badge：

import { Badge, BadgeGroup } from 'vant';

export default {
  components: {
    'van-badge': Badge,
    'van-badge-group': BadgeGroup
  }
};

代码演示

基础用法

默认情况下激活第一个badge。

:::demo 基础用法

<div class="badge-group-wrapper">
  <van-badge-group>
    <van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
    <van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
    <van-badge title="火炽寿司" @click="onItemClick"></van-badge>
    <van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
  </van-badge-group>
</div>

:::

选中某个badge

如果想默认选中某个badge，你可以在van-badge-group上设置activeKey属性，属性值为对应的badge索引。

:::demo 选中某个badge

<div class="badge-group-wrapper">
  <van-badge-group :active-key="2">
    <van-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></van-badge>
    <van-badge title="花式寿司" info="99" @click="onItemClick"></van-badge>
    <van-badge title="火炽寿司" @click="onItemClick"></van-badge>
    <van-badge title="手握寿司" info="199" @click="onItemClick"></van-badge>
  </van-badge-group>
</div>

:::

z-badge-group API

参数	说明	类型	默认值	必须
active-key	激活的badge的索引	string	0但必须子badge里的mark是有0位索引

z-badge API

参数	说明	类型	默认值	必须
title	badge的文案标题	string	''	required
info	当前badge的提示消息	string	''
url	跳转链接	string	链接直接跳转或者hash