nav.vue

<style lang="less">
//使用ID的目的是为了优先级，覆盖IVIEW样式
#vue-2018112101 {
    background-color: #444851;
    overflow-y: auto;
    .ivu-menu {
        .ivu-menu {
            .ivu-menu-item,
            .ivu-menu-submenu-title {
                height: 34px;
                padding: 0px 15px;
                line-height: 34px;
                background-color: #6d707b;
                font-size: 15px;
                color: #fff;
                padding-left: 30px !important;
            }
        }
        background-color: #444851;
        .ivu-menu-item,
        .ivu-menu-submenu-title {
            font-size: 17px;
            padding: 10px 15px;
            border-left: #ccc 5px solid;
            color: #fff;
            // background-color: #555;
        }
        .ivu-menu-item:hover,
        .ivu-menu-submenu-title:hover {
            color: #333;
            border-left: #f90 5px solid;
            background-color: #fff !important;
        }
        .ivu-menu-item-active {
            .ivu-menu-submenu-title {
                border-left-color: #f60;
                background-color: #342f3a;
            }
        }
        .ivu-menu-item-selected {
            color: #333;
            border-left: #f90 5px solid;
            background-color: #fff !important;
        }
    }
    .ivu-menu-opened {
        .ivu-menu-submenu-title {
            background-color: #342f3a !important;
        }
    }

    .ivu-menu-submenu-title,
    .ivu-menu-item {
        padding-right: 10px;
    }
    .ivu-menu-submenu-title-icon,
    .ivu-menu-vertical .ivu-menu-submenu-title-icon {
        right: 5px !important;
    }
    .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active {
        color: #333;
        background-color: #fff !important;
    }
}
</style>
<template>
    <!--备注-->
    <div id="vue-2018112101" :style="{width:width}">
        <Menu theme="dark" :active-name="activeName" :open-names="openNames" :width="width" @on-select="onSelect"
            :accordion="accordion">
            <component v-for="(item,index) in navConfig" :key="index"
                :is="item.children.length == 0 ? MenuItem : Submenu"
                :to="item.children.length == 0 ? (item.to || '') : ''" :name="''+index"
                v-if="(!item.isAdmin || $config.isAdmin) && ($config.isDev || !item.isDev)">
                <template v-if="item.children.length == 0">
                    <Icon v-if="item.icon" :type="item.icon" />{{item.title}}
                </template>
                <template v-else slot="title">
                    <Icon v-if="item.icon" :type="item.icon" />{{item.title}}
                </template>
                <MenuItem
                    v-if="item.children.length > 0 && (!item_1.isAdmin || $config.isAdmin) && ($config.isDev || !item_1.isDev)"
                    v-for="(item_1,index_1) in item.children" :key="index_1" :name="index+'-'+index_1" :to="item_1.to">
                <Icon v-if="item_1.icon" :type="item_1.icon" />
                {{item_1.title}}</MenuItem>
            </component>
        </Menu>
    </div>
</template>
<script type="text/javascript">
import Menu from 'view-design/src/components/menu';
export default {
    props: {
        activeName: {
            type: String,
            default: '0-0'
        },
        openNames: {
            type: Array,
            default() {
                return [];
            }
        },
        navConfig: {
            type: Array,
            default() {
                return [];
            }
        },
        accordion: {
            type: Boolean,
            default: true
        },
        /**宽度 */
        width: {
            type: String | Number,
            default: '180px'
        }
    },
    data: function () {
        return {
            Menu,
            MenuGroup: Menu.Group,
            MenuItem: Menu.Item,
            Submenu: Menu.Sub
        };
    },
    components: {},
    methods: {
        onSelect(name) {
            this.$emit('on-select', name);
        }
    },
    watch: {
        openNames(val, oldval) {}
    },
    created: function () {},
    mounted: function () {},
    //计算属性
    computed: {}
};
</script>