element-ui导航el-menu样式css错位的问题

最近新接触的element-UI,用npm安装之后遇到一个问题,从官网copy的导航代码,实际部署中,出现导航错位:

理论上不太可能出现这种低级问题,仔细反复核实代码:

<el-container>
<el-aside width=”200px”>
<el-menu
class=”el-menu-vertical-demo”
@open=”handleOpen”
@close=”handleClose”
background-color=”#545c64″
text-color=”#fff”
active-text-color=”#ffd04b”>
<el-submenu index=”1″>
<template slot=”title”>
<i class=”el-icon-location”></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot=”title”>分组一</template>
<el-menu-item index=”1-1″>选项1</el-menu-item>
<el-menu-item index=”1-2″>选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title=”分组2″>
<el-menu-item index=”1-3″>选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index=”1-4″>
<template slot=”title”>选项4</template>
<el-menu-item index=”1-4-1″>选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index=”2″>
<i class=”el-icon-menu”></i>
<span slot=”title”>导航二</span>
</el-menu-item>
<el-menu-item index=”3″ disabled>
<i class=”el-icon-document”></i>
<span slot=”title”>导航三</span>
</el-menu-item>
<el-menu-item index=”4″>
<i class=”el-icon-setting”></i>
<span slot=”title”>导航四</span>
</el-menu-item>
</el-menu>
</el-aside>
<el-container>
<el-header>
<el-menu
class=”el-menu-demo”
mode=”horizontal”
@select=”handleSelect”
background-color=”#545c64″
text-color=”#fff”
active-text-color=”#ffd04b”>
<el-menu-item index=”1″>处理中心</el-menu-item>
<el-submenu index=”2″>
<template slot=”title”>我的工作台</template>
<el-menu-item index=”2-1″>选项1</el-menu-item>
<el-menu-item index=”2-2″>选项2</el-menu-item>
<el-menu-item index=”2-3″>选项3</el-menu-item>
<el-submenu index=”2-4″>
<template slot=”title”>选项4</template>
<el-menu-item index=”2-4-1″>选项1</el-menu-item>
<el-menu-item index=”2-4-2″>选项2</el-menu-item>
<el-menu-item index=”2-4-3″>选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index=”3″ disabled>消息中心</el-menu-item>
<el-menu-item index=”4″><a href=”https://www.ele.me” target=”_blank”>订单管理</a></el-menu-item>
</el-menu>

代码并无问题,但是官网显示css样式是正常的,搜了一圈也没找到好像有类似问题的情况

由于之前没有使用过vue,不太清楚,到底是哪个环节出了问题,于是各种找资料+修改代码,尝试未果

就在放弃睡觉时,灵机一动,找到问题的所在了:

[reply]

原来是npm 安装的element-ui index.css样式出现了问题,目录在:

\node_modules\element-ui\lib\theme-chalk\index.css

解决办法,用cdn引用

<link href=”https://cdn.bootcss.com/element-ui/2.4.11/theme-chalk/index.css” rel=”stylesheet”>

或者,重新下载文件,覆盖element-ui目录,都可以。

[/reply]

人已赞赏
雕技术

fiddler微信https网站打不开或者抓包不了的原因

2018-12-1 0:24:27

二次开发雕技术

WordPress的WPBakery插件安装失败,无法安装,php版本不符的各种问题解决

2019-5-18 16:54:12

免责声明本文中提到的资源均来自于互联网,仅供个人学习交流,若您喜欢本文可附上原文链接随意转载。
版权人申诉:我要申诉
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索