我在使用 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
}
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" > </v-icon>
</v-badge>
您也可以使用v-chip
来做到这一点。我认为这是更好的方法。
<v-chip color="grey"> 1500000 </v-chip>
<div>test</div>
希望对您有所帮助!如有任何疑问,请随时提出。
关于javascript - Vuetify - 数量巨大的 v-badge,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51184510/