javascript - Vuetify - 数量巨大的 v 徽章

我在使用 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'
})

最佳答案

你有什么特别的理由为此使用 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
希望能帮助到你!如有任何疑问，请随时提出。

关于javascript - Vuetify - 数量巨大的 v 徽章，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51184510/