解决 elementUi 侧边栏折叠后图标不显示或者文字不消失问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
状况
侧边栏折叠后,部分图标消失,且字体不消失
解决办法
1.图标消失
去除 <el-menu-item>
下的 template
标签
例如:
<el-menu-item :index="subItem.path">
<template slot="title">
<i :class="subItem.icon"></i>
<span slot="title">{{ subItem.menuName }}</span>
</template>
</el-menu-item>
改成:
<el-menu-item :index="subItem.path">
<i :class="subItem.icon"></i>
<span slot="title">{{ subItem.menuName }}</span>
</el-menu-item>
2.文字不消失
我是使用 for 循环进行动态渲染侧边栏的,刚开始是使用div作为标签进行 for 循环,折叠后文字不消失
尝试用了一下编码但不渲染的标签代替div就隐藏了。div包在 el-menu
标签中才会出现这种问题。
初步猜测是因为 el-menu
下只能使用规定的标签吧,而且文字不消失是有二级菜单的父项才会出现
(1)首先安装插件 vue-fragment
npm i -s vue-fragment
(2)在 main.js
应用插件
import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)
(3)替换 el-menu
下包含的div标签
<div></div> => <fragment></fragment>
(4)替换后效果
GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:5 个月前 )
c345bb45
9 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 9 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)