Vuetify - v-badge，数量庞大

Question

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

我在css中找到了一个解决方法width: auto;很好v-badge大小（使用大数字），但现在它重叠我的v-tab内容，因为它正在向错误的方向扩展。

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

CodePen

HTML

<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>

CSS

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

JS

new Vue({
  el: '#app'  
})

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

希望能帮助到你！随意问任何疑问。