elementUI中如何在Tabs标签页的标题文字后面添加文字或图标
1、效果如下:
實現代碼如下:
<el-tab-pane name="first">
<span slot="label">
<span class="span-box">
<span>預警</span>
<el-tooltip
class="item"
effect="dark"
content="2"
placement="bottom-start"
>
<span class="btn-bell-badge">
<span class="num">2</span>
</span>
</el-tooltip>
</span>
</span>
</el-tab-pane>
<style lang="stylus" scoped>
.span-box {
display: flex;
justify-content: flex-start;
align-items: center;
.btn-bell-badge {
width: 26px;
height: 18px;
margin-left 5px;
line-height 18px
border-radius: 15px;
background: #f56c6c;
.num {
display: block;
width: 100%;
text-align: center;
font-size: 12px;
color: #fff;
}
}
}
</style>
總結
以上是生活随笔為你收集整理的elementUI中如何在Tabs标签页的标题文字后面添加文字或图标的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 《食堂远程下单系统》设计规格说明书
- 下一篇: 在.NET开发中的单元测试工具之(1)—