bmcui/src/components/menu.vue

<template>
    <div class="menu-contente">
        <Menu mode="horizontal" :active-name="activeName">

            <template v-for='(item, index) in menulist'>
                <template v-if='!!!item.children'>
                    <MenuItem :name="item.link" :to='item.link'>
                        <Icon v-if="item.icon" :type="item.icon" color="#1874ff" />
                        {{item.name}}
                    </MenuItem>
                </template>
                <template v-else>
                    <submenu :name="item.name">
                        <template slot="title">
                            {{item.name}}
                        </template>
                        <template v-for='i in item.children'>
                            <MenuItem :to='i.link' :name="i.name">{{i.name}}</MenuItem>
                        </template>
                    </submenu>
                </template>
            </template>

            <div class="current-baled"> <Tag :color="status == 2 ? 'red' : 'success'">当前模块：{{currentIndex}}h - {{currName}}</Tag></div>
        </Menu>


    </div>
</template>

<script>
    export default {
        name: 'allmenu',
        data() {
            return {
                theme: '',
                activeName: this.$route.name,
                menulist: [
                    {
                        name: "总览",
                        link: 'dashbord',
                        icon: 'ios-home',
                        isdisabel: false
                    },
                    {
                        name: "风扇控制",
                        link: 'fan',
                        icon: 'md-aperture',
                        isdisabel: false
                    },
                    {
                        name: "FRU信息",
                        link: 'fru_info',
                        icon: 'ios-grid',
                        isdisabel: false
                    },
                    {
                        name: "传感器设置",
                        link:'sensor_history',
                        icon: 'md-analytics',
                        isdisabel: false,
                    },

                    {
                        name: "日志",
                        isdisabel: false,
                        icon: 'ios-list-box-outline',
                        link: 'event_logs'
                    },

                    {
                        name: "电源控制",
                        isdisabel: false,
                        icon: 'md-power',
                        link: 'RemotPwrCtrl',
                    },
                    {
                        name: "设置",
                        link: "setting",
                        isDisabel: false,
                        icon: 'ios-cog-outline',
                    }
                ]
            }
        },
        computed:{
            currName(){
                return this.$store.state.currentblade.name
            },
            currentIndex(){
                return this.$store.state.currentblade.slot
            },
            status(){
                return this.$store.state.currentblade.status
            }
        },
        watch: {
            $route: function () {
                this.activeName = this.$route.link
            }
        }

    }
</script>

<style lang='scss' scoped>
    .menu-contente {
        /*position: fixed;*/
        width: 1180px;
        /*top: 0px;
        left: 0px;
        right: 0px;*/
        margin-left: auto;
        margin-right: auto;
    }
    .current-baled{
        color:#1874ff;
        float: right;
        margin-right: 10px;
    }
</style>