【前端小点】ElementUI-Dialog标题添加图标

最新推荐文章于 2024-08-21 10:26:14 发布

小球学前端

最新推荐文章于 2024-08-21 10:26:14 发布

阅读量2.1k

点赞数 2

分类专栏：前端小点项目经验文章标签：前端 elementui javascript

本文链接：https://blog.csdn.net/qiuqiu1628480502/article/details/125424125

版权

项目经验同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

前端小点

12 篇文章 0 订阅

订阅专栏

"本文介绍了如何在ElementUI的弹框组件中实现带有图标的自定义标题。通过在`<el-dialog>`的`slot="title"`中插入自定义HTML，结合CSS自定义类名实现所需样式，例如添加`<i class="el-icon-folder-add"></i>`图标和文字标题。示例代码展示了具体的实现方法，帮助开发者快速掌握这一技巧。"

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

在日常开发过程中，比较常见的一个需求，在弹框中的提示信息中展示图标，查看ElementUI官网，并没有加标题的示例，那么如果我们用ElementUI怎么实现这样的效果呢？
先看实现效果图：
在这里插入图片描述
代码，来抄作业！！！

<el-dialog title="详情" :visible.sync="addShow" :close-on-press-escape="false" :close-on-click-modal="false"
      width="600px">
      <div slot="title" class="dialog-header-title">
        <i class="el-icon-folder-add"></i>
        <span>详情</span>
      </div>
      123
    </el-dialog>
  </div>