SidebarItem.vue 2.24 KB
<template>
    <div v-if="!item.hide" class="menu-wrapper">
        <template v-if="!item.childList || item.childList.length ===0">
            <app-link :to="item.routeUrl||'/404'" :target="item.openWay?'':''">
                <el-menu-item :index="item.routeUrl || item.name" :class="{'submenu-title-noDropdown':!isNest}">
                    <item :icon="item.icon" :title="item.name"/>
                </el-menu-item>
            </app-link>
        </template>
        <el-submenu v-else ref="subMenu" :index="item.routeUrl || item.name">
            <template slot="title">
                <item :icon="item.icon" :title="item.name"/>
            </template>
            <sidebar-item
                v-for="(child) in item.childList"
                :key="child.name"
                :active-menu="activeMenu"
                :is-collapse="isCollapse"
                :is-nest="true"
                :item="child"
                class="nest-menu"
                :level="level+1"
                :show-menu-level="showMenuLevel"
            />
        </el-submenu>
    </div>
</template>

<script>
    import Item from './Item';
    import AppLink from './Link';
    import FixiOSBug from './FixiOSBug';

    export default {
        name: 'SidebarItem',
        components: {Item, AppLink},
        mixins: [FixiOSBug],
        props: {
            // route object
            item: {
                type: Object,
                required: true
            },
            isNest: {
                type: Boolean,
                default: false
            },
            isCollapse: {
                type: Boolean,
                default: false
            },
            basePath: {
                type: String,
                default: ''
            },
            level: {
                type: Number,
                default: 1
            },
            showMenuLevel: {
                type: Number,
                default: 0
            },
            activeMenu: {
                type: String,
                default: ''
            }
        },
        data() {
            // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
            // TODO: refactor with render function
            return {};
        },
        methods: {}
    };
</script>