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

很困的程序媛

已于 2022-12-29 14:44:57 修改

阅读量3.3k

点赞数 1

分类专栏： Element plus 文章标签：前端 javascript 开发语言

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

本文链接：https://blog.csdn.net/m0_67372185/article/details/128179006

版权

Element plus 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

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>