徽章

v-badge 组件的上标或下标是一个类似头像的图标或文本，用于向用户突出显示信息或将注意力吸引到特定元素上。徽章内的内容通常包含数字或图标。

用例

最简单形式的徽章显示在它包装的内容的右上角，并且需要徽章插槽。

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

示例

下面是一些简单到复杂的例子。

选项卡

徽章有助于以各种方式向用户传递信息。

template

<template>
  <v-toolbar>
    <v-tabs
      dark
      background-color="primary"
      grow
    >
      <v-tab>
        <v-badge
          color="pink"
          dot
        >
          Item One
        </v-badge>
      </v-tab>
      <v-tab>
        <v-badge
          color="green"
          content="6"
        >
          Item Two
        </v-badge>
      </v-tab>
      <v-tab>
        <v-badge
          color="deep-purple accent-4"
          icon="mdi-vuetify"
        >
          Item Three
        </v-badge>
      </v-tab>
    </v-tabs>
  </v-toolbar>
</template>

鼠标悬停显示

你可以用可见性控制做很多事情，例如，在鼠标悬停时显示徽章。

template script

<template>
  <div class="text-center">
    <v-badge
      :value="hover"
      color="deep-purple accent-4"
      content="9999+"
      left
      transition="slide-x-transition"
    >
      <v-hover v-model="hover">
        <v-icon
          color="grey lighten-1"
          large
        >
          mdi-account-circle
        </v-icon>
      </v-hover>
    </v-badge>
  </div>
</template>

<script>
  export default {
    data: () => ({
      hover: false,
    }),
  }
</script>

Vuetify Medium

Find guides, articles and tutorials on the official Vuetify publication

ads by Vuetify

](https://medium.com/vuetify?ref=vuetifyjs.com)

动态通知

你可以将徽章与动态内容合并，以创建通知系统之类的东西。

template script

<template>
  <v-container>
    <v-row justify="space-around">
      <div>
        <v-btn
          class="mx-1"
          color="primary"
          @click="messages++"
        >
          Send Message
        </v-btn>
        <v-btn
          class="mx-1"
          color="error"
          @click="messages = 0"
        >
          Clear Notifications
        </v-btn>
      </div>
      <v-badge
        :content="messages"
        :value="messages"
        color="green"
        overlap
      >
        <v-icon large>mdi-email</v-icon>
      </v-badge>
    </v-row>
  </v-container>
</template>

<script>
  export default {
    data () {
      return {
        messages: 0,
        show: false,
      }
    },
  }
</script>

自定义选项

v-badge 组件是灵活的，可以在各种使用场景中使用，并可以在众多元素上使用。还可以通过 offset-x 和 offset-y props 来调整位置。

template

<template>
  <v-container>
    <v-row
      align="center"
      justify="center"
    >
      <v-badge
        bordered
        color="error"
        icon="mdi-lock"
        overlap
      >
        <v-btn
          class="white--text"
          color="error"
          depressed
        >
          Lock Account
        </v-btn>
      </v-badge>
      <div class="mx-3"></div>
      <v-badge
        bordered
        bottom
        color="deep-purple accent-4"
        dot
        offset-x="10"
        offset-y="10"
      >
        <v-avatar size="40">
          <v-img src="https://cdn.vuetifyjs.com/images/lists/2.jpg"></v-img>
        </v-avatar>
      </v-badge>
      <div class="mx-3"></div>
      <v-badge
        avatar
        bordered
        overlap
      >
        <template v-slot:badge>
          <v-avatar>
            <v-img src="https://cdn.vuetifyjs.com/images/logos/v.png"></v-img>
          </v-avatar>
        </template>
        <v-avatar size="40">
          <v-img src="https://cdn.vuetifyjs.com/images/john.png"></v-img>
        </v-avatar>
      </v-badge>
    </v-row>
  </v-container>
</template>