项目中正确使用element-plus的icons图标的办法

本文主要是介绍项目中正确使用element-plus的icons图标的办法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、导入组件

import {DeleteFilled} from '@element-plus/icons-vue'

二、实例中添加组件  或者在data中添加变量

components:{DeleteFilled},

 或

data() {return {Search:Search}

三、项目中使用

1、添加到组件中引用方式

 <div style=" width: 1.5em; height: 1.5em;padding: 8px 0;color: #ff0000;float: right;" ><DeleteFilled   @click="deleteRole(r)"> </DeleteFilled></div>

2、添加到data中的引用方式（直接显示图标）

 <el-input v-model="keywords" placeholder="通过用户名搜索用户..." :prefix-icon="Search"style="width: 400px;margin-right: 10px" @keydown.enter.native="doSearch"></el-input>

四、在输入框中添加图标方法

采用组件方式显示图标

 <el-inputplaceholder="请输入部门名称进行搜索...":prefix-icon="Search"v-model="filterText"><template #prefix ><el-icon style="align-self: center;font-size: 16px;color: #409eff"><Search /></el-icon></template></el-input>

导入多少根据使用的情况，也可以在mian.js中全局注册导入，这里不再赘述。

这篇关于项目中正确使用element-plus的icons图标的办法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---