vant/docs/examples-docs/badge.md

Badge 徽章

使用指南

import { Badge } from 'vant';

Vue.component(Badge.name, Badge);

代码演示

基础用法

默认情况下激活第一个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