element Tabs标签页与Badge 标记结合

最新推荐文章于 2024-04-29 17:57:53 发布

苍风的心上人

最新推荐文章于 2024-04-29 17:57:53 发布

阅读量1.3k

点赞数 5

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_46131497/article/details/131896902

版权

效果图
在这里插入图片描述
代码如下：

<el-tab-pane :name="Number(0)">
          <template #label>
            <span class="custom-tabs-label">
              <el-badge :value="unConfirmTotal" class="item">
                <span>未确认</span>
              </el-badge>
            </span>
          </template>
          <div>内容</div>
</el-tab-pane>

el-badge中的value是上面的数字，因为单纯的直接弄进来，文字会出现下移的样式，需要修改样式，我是用的是scss样式语言。.el-badge__content.is-fixed是修改数字的位置

.demo-tabs .custom-tabs-label span {
  vertical-align: super;
  margin-left: 4px;
}
::v-deep(.el-badge__content.is-fixed) {
  top: 7px;
  right: 6px
}