elementUI中如何在Tabs标签页的标题文字后面添加文字或图标

最新推荐文章于 2024-08-30 10:55:48 发布

我在小楼听着风

最新推荐文章于 2024-08-30 10:55:48 发布

阅读量8.2k

点赞数 6

分类专栏： vue+element 文章标签： elementui vue

本文链接：https://blog.csdn.net/weixin_44490109/article/details/110862313

版权

vue+element 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用HTML、CSS和JavaScript实现一个前端UI组件，具体是一个带有预警提示功能的标签。内容包括预警文字和一个带有数字角标的红框按钮，通过CSS进行样式定制，例如设置背景色、边框圆角和内部布局。

摘要由CSDN通过智能技术生成

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>