vue3Element Plus中icon图标不显示问题的解决
发布于2022-03-18 22:45 阅读(3948) 评论(0) 点赞(0) 收藏(5)
问题描述
在vue组件中使用了Element Plus中icon图标<el-icon>方法想要显示图标，程序能运行但在浏览器中图标无法显示。
解决办法
根据Element Plus官方文档给出的教程以及实践操作，解决办法如下：
- 1.安装
在终端运行下面指令
npm install --save @element-plus/icons
注意：Element Plus官方文档给出的指令为npm install
@element-plus/icons-vue，但运行时终端可能会提供更正确的指令，可以都尝试运行一下看哪个可行
- 2.在vue文档中写入代码
你想要显示在哪个vue组件文档，就在那个文档写入如下代码：
<script >
//首先是导入图标们，要用哪个就导入哪个
//例如Search就是那个放大镜的图标
import {Search,Edit,Check,Message,Star,Delete,} from "@element-plus/icons";
export default {
//其次是写入components中
components: {
Search,
Edit,
Check,
Message,
Star,
Delete,
}
};
</script>
- 3.使用
同时在该vue组件文档中插入代码
<el-icon><Search /></el-icon>
- 4.效果
显示成功！
原文链接:https://blog.csdn.net/weixin_44017994/article/details/122903445
所属网站分类: 技术文章 > 博客
作者：爱出汗
链接：http://www.qianduanheidong.com/blog/article/318450/fe3bfaf08355d3ee1f54/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力