脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3 Element Plus中icon图标不显示

vue3 Element Plus中icon图标不显示的解决方案

 更新时间：2024年03月19日 14:58:17   作者：Y猿某人  
这篇文章主要介绍了vue3 Element Plus中icon图标不显示的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

问题描述

在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.效果

总结

显示成功！

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论