解决办法就是不要用<Icon type="ios-checkmark" />这种方式，而是使用渲染之后的<i class="ivu-icon ivu-icon-md-list-box"></i>这种方式，就可以了
问题的产生
并非专业前端，其实是主要做java后台的，但是小公司没办法，前台html页面也要写。需求是：现在有管理平台已经是写好的了，用了一两年了，但是突然老板就觉得界面有点丑了，而我又手贱的推荐了iview的界面给老板看了，他觉得不错，想改成iview的风格那种界面。于是我就苦逼了，之前的项目是boostrap + jQ，现在换iview，岂不是要换一整套，而我为了偷懒，就选择折中，混用。
结论，千万别混着用，会有很多问题
首先就是要自己引入css和javascript。其次，虽然iview的官方给了提示
注意
就表明，其实是允许这么做的。
接着就是把官方的demo，复制到自己的页面代码中，然后改成引入的方式
<head>
<meta charset="utf-8">
<title>vue test</title>
<link rel="stylesheet" type="text/css" href="../dist/styles/iview.css">
</head>
<body>
<div id="menuTestDiv">
<i-menu :theme="theme2" active-name="1-2" :open-names="['1']">
<Submenu name="1">
<template slot="title">
<Icon type="ios-analytics" />
Navigation One
</template>
<MenuGroup title="Item 1">
<MenuItem name="1-1">Option 1</MenuItem>
<MenuItem name="1-2">Option 2</MenuItem>
</MenuGroup>
<MenuGroup title="Item 2">
<MenuItem name="1-3">Option 3</MenuItem>
<MenuItem name="1-4">Option 4</MenuItem>
</MenuGroup>
</Submenu>
<Submenu name="2">
<template slot="title">
<Icon type="ios-filing" />
Navigation Two
</template>
<MenuItem name="2-1">Option 5</MenuItem>
<MenuItem name="2-2">Option 6</MenuItem>
<Submenu name="3">
<template slot="title">Submenu</template>
<MenuItem name="3-1">Option 7</MenuItem>
<MenuItem name="3-2">Option 8</MenuItem>
</Submenu>
</Submenu>
<Submenu name="4">
<template slot="title">
<Icon type="ios-cog" />
Navigation Three
</template>
<MenuItem name="4-1">Option 9</MenuItem>
<MenuItem name="4-2">Option 10</MenuItem>
<MenuItem name="4-3">Option 11</MenuItem>
<MenuItem name="4-4">Option 12</MenuItem>
</Submenu>
</i-menu>
</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../dist/iview.js"></script>
<script type="text/javascript">
new Vue({
el:"#menuTestDiv",
data:function() {
return {
theme2:'dark'
}
}
})
</script>
</html>
你就会发现各种报错，效果不出来
报错
诸如此类的，还有MenuItem，解决方法是用连字符-，改成menu-group，menu-item就可以了
改好之后还是有问题，就是submenu中如果用<icon/>并且后面还接菜单名称的话，菜单名称就显示不出来
2个父菜单，第二个父下面还有菜单
结果你发现运行之后，aaa，bbb，ccc都消失了
实际运行
并非firefox浏览器的问题，我换了chrome浏览器也是这样。
然后menuitem就没有这个问题。
我问了专业的前端人员，也没发现问题，他只是丢下了一句，你为什么非要这样用呢？
最后我还是无意中解决了，直接用<i class="ivu-icon ivu-icon-md-list-box"></i>渲染过得就行
虽然这样，你要复制class的那么，代码会多一点，但是还是可以看到的
改了i之后，可以看到了
暂不知道使用iview的<icon>标签为什么会显示不了后面的名称的原因
本人时间有限，也没去iview的开发者们，所以原因暂时探究不出来，只是找到了解决办法，虽然有点笨的解决办法。
网友评论