【Element plus】icon动态渲染和icon与文本水平对齐

原创已于 2022-12-29 14:44:57 修改 · 3.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2022-12-04 23:03:02 首次发布

Element plus 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在Vue项目中使用Element Plus图标组件，并解决图标与文字对齐问题。通过引入Element Plus并利用<el-icon>标签，实现自定义图标渲染。同时，针对图标与文字对齐不佳的情况，提供了样式调整方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、icon渲染

2、图标和文字无法对齐

1、icon渲染

先引入element plus

<el-icon>
    <component :is="item.icon" />
</el-icon>


<script setup>
const taskNum = reactive([
  { title: '今日未下达数', fixed: 2, icon: "Tickets" },
  { title: '今日未完成数', fixed: 26, icon: "Warning" },
  { title: '今日已完成数', fixed: 187, icon: "DocumentChecked" },
  { title: '今日超时未完成数', fixed: 2, icon: "Timer" },
  { title: '今日超时已完成数', fixed: 2, icon: "PieChart" },
  { title: '今日取消总数数', fixed: 189, icon: "CircleClose" }
])
<script>

2、图标和文字无法对齐

设置position为relative,然后通过top调整

<div class="taskZh-title">
    <el-icon size="25" style="position:relative;top:7px;margin: 0 5px 0 10px" >
        <component :is="item.icon" />
    </el-icon>
    <span>{{item.title}}</span>
</div>