动态使用element-plus 的图标

最新推荐文章于 2024-05-17 21:44:10 发布

困困的果果头

最新推荐文章于 2024-05-17 21:44:10 发布

阅读量532

点赞数 1

分类专栏： element相关文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/qq_36687211/article/details/128632985

版权

element相关专栏收录该内容

7 篇文章 1 订阅

订阅专栏

一般情况下使用el-icon：

<el-icon :size="20">
    <House />
 </el-icon>

动态渲染使用：

<el-icon :size="20">
	<template v-for="(item, index) in icons" :key="index">
		<el-icon :color="item.color" :size="item.size">
    		<component :is="item.name"></component>
    	</el-icon>
    </template>
 </el-icon>

export default {
	data() {
        return{
            icons: [
                {
                    name: "House",
                    color: "#409EFC",
                    size: 20,
                },
                {
                    name: "Plus",
                    color: "",
                    size: 24,
                },
                {
                    name: "FullScreen",
                    color: "#f89898",
                    size: ""
                }
            ]
        }
    },
}