iView导航菜单Menu切换后图标不显示的问题处理

1.概述

        因为用惯了vue2.0，所以搭配iView还是使用的View UI，结果再想使用切换菜单时发现官方给的例子出现图标不显示的bug，不知道Plus会不会出现这个问题。

2.官网代码

<template>
    <Menu mode="horizontal" :theme="theme1" active-name="1">
        <MenuItem name="1">
            <Icon type="ios-paper" />
            内容管理
        </MenuItem>
        <MenuItem name="2">
            <Icon type="ios-people" />
            用户管理
        </MenuItem>
        <Submenu name="3">
            <template slot="title">
                <Icon type="ios-stats" />
                统计分析
            </template>
            <MenuGroup title="使用">
                <MenuItem name="3-1">新增和启动</MenuItem>
                <MenuItem name="3-2">活跃分析</MenuItem>
                <MenuItem name="3-3">时段分析</MenuItem>
            </MenuGroup>
            <MenuGroup title="留存">
                <MenuItem name="3-4">用户留存</MenuItem>
                <MenuItem name="3-5">流失用户</MenuItem>
            </MenuGroup>
        </Submenu>
        <MenuItem name="4">
            <Icon type="ios-construct" />
            综合设置
        </MenuItem>
    </Menu>
    <br>
    <p>Change theme</p>
    <RadioGroup v-model="theme1">
        <Radio label="light"></Radio>
        <Radio label="dark"></Radio>
        <Radio label="primary"></Radio>
    </RadioGroup>
</template>
<script>
    export default {
        data () {
            return {
                theme1: 'light'
            }
        }
    }
</script>

我直接复制了官方示例代码试了下，依旧还会有这个问题，在不想尝试切版本是否解决的基础上直接对css处理就好了。

 

该问题只出现在light主题下，其他主题无影响。

3.解决方案

<style scoped lang="css">
.ivu-menu-item-selected span, .ivu-menu-item-selected i {
    color: unset;
}
.menu >>> .ivu-menu-submenu-title {
    color: unset;
}
</style>
<template>
    <div>
        <Menu mode="horizontal" :theme="theme1" active-name="1" class="menu">
            <!-- 省略代码 -->
        </Menu>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                theme1: 'light'
            }
        }
    }
</script>

        已选择的图标通过直接设置color: unset；设置即可，但是含有Submenu标签的子菜单图标不显示的方法需要在目录上级定义一个class，Menu或者Submenu层级皆可，然后设置样式。注意Submenu的生成是内部生成需要加>>>指定。