vue3+Element-plus icon图标无法显示的问题(已解决)
Vue3 解决 显示 无法 图标 Element Plus icon
2023-09-11 14:16:27 时间
项目场景:
在使用vue3+element-puls时,默认的icon图片无法显示的问题
问题描述:
在使用element-plus 1.2.0-beta.3版本时
引入侧栏组件时,导航左侧icon图标无法显示
效果图应该是
源码如下
<el-row class="tac">
<el-col :span="12">
<h5>Default colors</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
>
<el-sub-menu index="1">
<template #title>
<el-icon><location /></el-icon>
<span>Navigator One</span>
</template>
<el-menu-item-group title="Group One">
<el-menu-item index="1-1">item one</el-menu-item>
<el-menu-item index="1-2">item one</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">item three</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title>item four</template>
<el-menu-item index="1-4-1">item one</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
<el-icon><icon-menu /></el-icon>
<span>Navigator Two</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<el-icon><document /></el-icon>
<span>Navigator Three</span>
</el-menu-item>
<el-menu-item index="4">
<el-icon><setting /></el-icon>
<span>Navigator Four</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
原因分析:
个人认为新版本的icon引入方式改变,之前是默认引入的,现在需要单独引入
解决方案:
方案一
使用过的图标单独引入并注册
<script>
import {Location, Setting, Menu ,Document} from '@element-plus/icons'
export default {
components: {
Location, Setting, Menu ,Document
},
name: "Aside"
}
</script>
此时的效果为
发现menu图标仍然未成功显示,查询官网后标签名称如下
修改icon-menu为menu后还是没有成功
<el-menu-item index="2">
<el-icon><menu/></el-icon>
<span>Navigator Two</span>
</el-menu-item>
个人认为menu标签具有特殊语义,此时采用方案二
方案二
找到Icon图标选项
将选项置于Copy Svg Content
复制相应代码,此处复制Memu并插入源代码中
<el-menu-item index="2">
<el-icon><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-394d1fd8=""><path fill="currentColor" d="M160 448a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H608zM160 896a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H608z"></path></svg></el-icon>
<span>Navigator Two</span>
</el-menu-item>
此时全部正常显示
相关文章
- 前端提升生产力系列三(vant3 vue3 移动端H5下拉刷新,上拉加载组件的封装)
- vue.js3.x 使用vue3-count-to 组件(到可视区域才start数字滚动 vue@3.2.33 / vue3-count-to@1.1.2)
- vue3: 动态修改favicon(网站的ico 图标)(vue@3.2.26)
- Vue3快速上手资料!手把手带你彻底学会Vue3,超详细讲解!不怕学不会!【建议收藏】【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通vue3笔记资料】
- vue3怎样使用elementui?用elementui 的新版本element-plus即可
- 用Vue3构建企业级前端应用,TS能让你更轻松点
- vue3 - .eslintignore 配置忽略指定文件或者文件夹的eslint检查报错
- vue3 - 关闭eslint提示参数必须定义类型
- Vue3学习笔记(五)——路由,Router
- vue2.x与vue3.x中自定义指令详解
- Vue3使用IP地址访问(解决 ERR_CONNECTION_REFUSED)