动态使用 Element Plus 中 el-icon 组件的方法

最新推荐文章于 2025-06-26 08:50:51 发布

原创最新推荐文章于 2025-06-26 08:50:51 发布 · 954 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

小技巧专栏收录该内容

4 篇文章

订阅专栏

该代码示例展示了如何在Vue.js应用中通过component组件的is属性来动态渲染不同的el-icon图标，每个图标可以设置颜色和大小。icons数组包含了不同图标的名字、颜色和尺寸信息。

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

通过 component 组件的 is 属性动态渲染 el-icon。

<template>
	<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>
</template>

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