blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-24 18:36:51 +08:00
Code Issues Projects Releases Wiki Activity
vant/docs/markdown/zh-CN/badge.md
neverland d8b6ad7d54
[new feature] add i18n support (#310) 
* fix: Tabbar icon line-height

* [new feature] progress add showPivot prop

* [new feature] TabItem support vue-router

* [new feature] update document header style

* [Doc] add toast english ducoment

* [new feature] add i18n support

* feat: Extract demos from markdown

* feat: Base components demos

* [new feature] complete demo extract & translate

* [fix] text cases

* fix: add deepAssign test cases

* fix: changelog detail

* [new feature] AddressEdit support i18n
2017-11-15 20:08:51 -06:00

1.2 KiB
Raw Blame History

Badge 徽章

使用指南

import { Badge } from 'vant';

Vue.component(Badge.name, Badge);

代码演示

基础用法

通过在van-badge-group上设置active-key属性来控制选中的badge

<van-badge-group :active-key="activeKey">
  <van-badge title="热销榜" @click="onClick"></van-badge>
  <van-badge title="花式寿司" @click="onClick" info="8"></van-badge>
  <van-badge title="火炽寿司" @click="onClick" info="99"></van-badge>
  <van-badge title="手握寿司" @click="onClick" info="199"></van-badge>
</van-badge-group>

export default {
  data() {
    return {
      activeKey: 0
    };
  },
  methods: {
    onClick(key) {
      this.activeKey = key;
    }
  }
};

BadgeGroup API

参数 说明 类型 默认值 可选值
active-key 选中badge的索引 `String Number` 0

Badge API

参数 说明 类型 默认值 可选值
title 内容 String '' -
info 提示消息 String '' -
url 跳转链接 String - -