文章目录
前言一、安装二、使用1.引入需要的图标2.页面效果3.还有一个奇怪的问题 总结前言
用vue3开发的时候,使用element-plus UI组件库的时候,发现不能像之前vue2时候使用的那么方便了,需要单独引入和使用,且使用的方式发生了很大的变化,这篇文章将详细的为你说明element-plus icon组件库的使用方法。
一、安装
第一种,使用包管理工具:
$ npm install @element-plus/icons-vue
$ yarn add @element-plus/icons-vue
$ pnpm install @element-plus/icons-vue
第二种,使用vue-vli 脚手架使用可视化面板进行添加:
二、使用
1.引入需要的图标
后台有一个需要对用户进行用户管理的功能,为美化页面,在菜单栏需要引入图标
代码如下(template部分):
<el-menu :router="true" default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse"@open="handleOpen"@close="handleClose"><el-submenu index="1"><template #title><el-icon><UserFilled />// 添加一个代表用户的图标</el-icon><span>用户管理</span></template><el-menu-item index="/users"> 用户列表 </el-menu-item></el-submenu></el-menu>
代码如下(script部分):
<script>import {UserFilled} from '@element-plus/icons-vue'// 使用的时候需要单独引入这个图标从库里export default {components: {UserFilled// 单独声明这个},setup() {// 后面都省略了
如果按照官网中提供的方法,页面并没有成功加载出图标:
所以还需要再声明一下(哎,迭代迭的越来越花里胡哨)
2.页面效果
就成功引入到我们的页面上了!
反观vue2使用element UI组件库的时候好像使用并没有那么复杂并没有,不管是全局导入或者是按需导入(好像不需要单独引入)都可以直接拿直接用就挺方便的
就比如说这样,按钮里直接加上就可以使用了
<el-button type="primary" icon="el-icon-search">搜索</el-button>
3.还有一个奇怪的问题
实际在vue3开发中,像input框上加图标的时候,使用之前的那种用法也是可以的(且在HBuilderX中还存在提示),这种可以参考着element UI组件库看看,而element-plus ui组件库的图标不能直接进行使用(需要先导入整个包,再单独进行使用),这就是我觉得很奇怪的一个点。
总结
初尝试element-plus ui组件库的小伙伴可以看看我其他的文章,这都是我这段时间踩的坑
Vue如何实现不同登录方式的切换(账号密码登录、邮箱验证登录等)
关于element-plus 中侧边菜单栏的使用中的一个不经意的小问题(避坑)