首页前端知识 elementPlus使用icon和动态渲染icon

elementPlus使用icon和动态渲染icon

2024-05-12 17:05:01 前端知识前端哥 556 906 我要收藏

 npm install @element-plus/icons-vue复制

2.在main.js里面全局注册所有icon

 <el-icon>
      <Minus /> //标签名Edit就是官方提供的icon名
      <Plus /> //标签名Edit就是官方提供的icon名
</el-icon>
 
或者直接用
 <Minus /> //标签名Edit就是官方提供的icon名
 <Plus /> //标签名Edit就是官方提供的icon名复制

4.动态渲染icon：使用component

 <el-icon>
    <component :is="iconName"/>  //看这里 iconName的值 就是官方提供的icon名
</el-icon>
 
//js代码中
data(){
    return{
        iconName:"Plus",  //看这里 iconName的值 就是官方提供的icon名
    }
}复制

2024-08-27 09:08:17

2024-05-09 11:05:34

2024-06-06 10:06:47

2024-04-22 09:04:34

2024-03-29 15:03:20

2024-04-20 17:04:38

2024-05-10 08:05:15

2024-10-30 21:10:12

2024-11-10 09:11:04

2024-11-10 09:11:50

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

elementPlus使用icon和动态渲染icon

	<el-icon>
	<Minus /> //标签名Edit就是官方提供的icon名
	<Plus /> //标签名Edit就是官方提供的icon名
	</el-icon>

	或者直接用
	<Minus /> //标签名Edit就是官方提供的icon名
	<Plus /> //标签名Edit就是官方提供的icon名

	<el-icon>
	<component :is="iconName"/> //看这里 iconName的值就是官方提供的icon名
	</el-icon>

	//js代码中
	data(){
	return{
	iconName:"Plus", //看这里 iconName的值就是官方提供的icon名
	}
	}

elementPlus使用icon和动态渲染icon

微信扫一扫：分享