代码之家 › 专栏 › 技术社区 › Toodoo

Vuetify-数量巨大的V徽章

vuetify.js vue.js css html javascript

0

Toodoo · 技术社区 · 8 年前

我在使用 v-badge 和 v-tab 数量巨大 V形徽章 是的。

我在css中找到了一个解决方法 width: auto; 很好地 V形徽章 大小(使用大量数字),但现在它与我的 V形凸耳 满足是因为它正在向错误的方向扩展。

我怎样才能避免 V形徽章 内容重叠 V形凸耳 内容?

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'  
})

1 回复 | 直到 8 年前

1

4

Nimeshka Srimal 8 年前

我想加一个答案,因为没有人发布任何消息。

你有什么特别的理由使用 v-badge 为了这个?我想 V形徽章 不是你用它的方式。它有固定的宽度和高度。你考虑过用 v-chip 是吗?如我所见,这是一个很适合你的要求。

但是,如果您坚持使用 V形徽章 ,你可以做一些小技巧,通过在你的号码和文本之间添加一个图标,让它们正确对齐。

<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型芯片 做这个。我认为这是更好的方法。

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

CodePen v-badge

希望有帮助!有任何疑问请尽管问。