Question

我在使用v-badge和v-tab时有一些问题。

我在CSS中找到了一种解决方法，可以将v-badge的大小很好地width: auto;（以使用大量数字），但是现在它与我的v-badge内容重叠，因为它的扩展方向错误。 / p>

如何避免我的v-tab内容与我的v-badge内容重叠？

HTML

v-tab

CSS

<div id="app">
  <v-app id="inspire">
    <v-tabs fixed-tabs>
      <v-tab
        v-for="n in 3"
        :key="n"
      >
        <v-badge color="secondary">
          <span>Test</span>
          <span slot="badge"> 15000 </span>
        </v-badge>
      </v-tab>
    </v-tabs>
  </v-app>
</div>

JS

.v-badge__badge{
  width:auto;
  border-radius: 12px;
  padding: 5px 10px;
  margin-left: 20px
}

Answer 1

我想添加一个答案，因为没有人发布任何内容。

您是否有特定原因为此使用v-badge？我认为v-badge并不打算以您使用它的方式使用。它具有固定的宽度和高度。您是否考虑过使用v-chip？正如我所看到的，这很适合您的需求。

但是，如果您坚持使用v-badge，则可以在数字和文本之间添加图标，从而进行一些小小的改动，使它们正确对齐。

<v-badge left color="secondary">
    <span slot="badge"> 15000 </span>
    <span slot="default">Test</span>
    <v-icon large color="grey lighten-1" >&nbsp;</v-icon>
</v-badge>

CodePen - v-badge

您也可以使用v-chip来执行此操作。我认为这是更好的方法。

<v-chip color="grey"> 1500000 </v-chip>
<div>test</div>

CodePen v-badge

希望有帮助！随时提出任何疑问。

Answer 2

只需使用CSS制作徽章：

.myBadge {
  background-color: lightgrey; 
  border-radius: 90px; 
  height: 20px;
  font-weight: bold;
  min-width: 20px;
  color: white; 
  margin-left: 8px; 
  padding: .5px 3px .5px 3px; 
  text-align: center; 
  vertical-align: middle;
}

Vuetify-数量众多的V型徽章

2 个答案: