Vuetify - 数量巨大的 v-badge答案

【问题标题】：Vuetify - v-badge with huge numberVuetify - 数量巨大的 v-badge
【发布时间】：2018-07-05 06:21:05
【问题描述】：

我在使用 v-badge 和 v-tab 时遇到了一些问题，v-badge 中有大量数字。

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

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

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
}

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

【问题讨论】：

数字缩写
辅助库：github.com/domharrington/js-number-abbreviate
感谢分享这个库。徽章主要包含 3 位数字（例如：125），有时是 4 或 5 位数字，我将使用您的库。但不会解决主要情况。

标签： javascript html css vue.js vuetify.js

【解决方案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

希望对您有所帮助！如有任何疑问，请随时提出。

【讨论】：

【解决方案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;
}

【讨论】：