signal_web/src/components/Navside.vue

<template>
    <div>
        <el-row :class="[{'shortnav':isCollapse},{'longNav':!isCollapse}]">
            <el-col :span="24">
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        @select="handleSelect"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        router
                        :collapse="isCollapse"
                >
                    <el-submenu :index="nav.clmid" :route="nav.clmurl" v-for="nav in navs">
                        <template slot="title">
                            <i :class="nav.icon"></i>
                            <span>{{nav.clmname}}</span>
                        </template>
                        <el-menu-item-group v-for="(child,j) in nav.childs">
                            <el-menu-item :index="child.clmid" :route="child.clmurl">{{child.clmname}}
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="99">
                        <template slot="title">
                            <i class="icon_logout"></i>
                            <span>退出登陆</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item @click="clickLogout">退出登陆
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import Navs from '../api/Navs';
    import {SignOut} from '../api/getApiRes.js'

    let qs = require('qs');
    export default {
        data() {
            return {
                wildState: 0,
                navs: [],
            }
        },
        props: ['isCollapse'],
        mounted() {
            this.getTableQuery();
        },
        methods: {
            handleSelect(i, s, t) {
                this.$emit('TabsAdd', i);//触发事件
            },
            getTableQuery() {
                // 菜单
                this.navs = Navs;
            },
            handleOpen(key, keyPath) {
                // console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                // console.log(key, keyPath);
            },
            clickLogout() {
                let that = this;
                let param = {
                    token: localStorage.token
                };
                let postdata = qs.stringify(param);

                this.$confirm('此操作将退出当前账号, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    SignOut(postdata).then(res => {
                        that.$message({
                            showClose: true,
                            message: '用户已退出！',
                            type: 'success'
                        });
                        localStorage.usercode = '';
                        localStorage.token = '';
                        that.$router.push({path: '/login', query: {status: 1}});
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消用户退出'
                    });
                })
            }
        }
    }
</script>
<style scoped>
    .shortnav {
        position: absolute;
        width: 65px;
        top: 54px;
        bottom: 0;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        height: 100%;
    }

    .longNav {
        position: absolute;
        width: 320px;
        top: 48px;
        bottom: 0;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        height: 100%;
    }

    .el-col, .el-menu {
        height: 100%;
        border-right: 0;
    }

    /deep/ .el-menu-item {
        background-color: rgba(255, 255, 255, 0) !important;
    }

    /deep/ .el-menu {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    /deep/ .el-submenu__title {
        background: rgba(255, 255, 255, 0) !important;
    }

    .el-menu li:hover {
        background: #00599A;
    }

    /deep/ .el-menu-item:hover {
        background: #00599A !important;
    }

    .logout {
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        height: 56px;
        /*line-height: 56px;*/
    }

    .logout:hover {
        background: rgb(67, 74, 80);
    }

    .littleLogo {
        float: left;
    }


    .icon_home {
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_home.png") top center no-repeat;
        background-size: 100%;
    }

    .icon_region {
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_region.png") top center no-repeat;
        background-size: 100%;
    }

    .icon_signEquip {
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_signEquip.png") top center no-repeat;
        background-size: 100%;
    }

    .icon_equip {
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_equip.png") top center no-repeat;
        background-size: 100%;
    }

    .icon_record {
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_record.png") top center no-repeat;
        background-size: 100%;
    }

    .icon_tactics {
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_tactics.png") top center no-repeat;
        background-size: 100%;
    }

    .icon_plan {
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_plan.png") top center no-repeat;
        background-size: 100%;
    }

    .icon_task {
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_task.png") top center no-repeat;
        background-size: 100%;
    }

    .icon_statistics {
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_statistics.png") top center no-repeat;
        background-size: 100%;
    }

    .icon_setting {
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_setting.png") top center no-repeat;
        background-size: 100%;
    }


    .icon_logout {
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_logout.png") top center no-repeat;
        background-size: 100%;
    }



    li:hover .icon_home {
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_home_w.png") top center no-repeat;
        background-size: 100%;
    }

    li:hover .icon_region {
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_region_w.png") top center no-repeat;
        background-size: 100%;
    }

    li:hover .icon_signEquip {
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_signEquip_w.png") top center no-repeat;
        background-size: 100%;
    }

    li:hover .icon_equip {
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_equip_w.png") top center no-repeat;
        background-size: 100%;
    }

    li:hover .icon_record {
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_record_w.png") top center no-repeat;
        background-size: 100%;
    }

    li:hover .icon_tactics {
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_tactics_w.png") top center no-repeat;
        background-size: 100%;
    }

    li:hover .icon_plan {
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_plan_w.png") top center no-repeat;
        background-size: 100%;
    }

    li:hover .icon_task {
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_task_w.png") top center no-repeat;
        background-size: 100%;
    }

    li:hover .icon_statistics {
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_statistics_w.png") top center no-repeat;
        background-size: 100%;
    }

    li:hover .icon_setting {
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_setting_w.png") top center no-repeat;
        background-size: 100%;
    }

    li:hover .icon_logout{
        width: 18px;
        height: 18px;
        float: left;
        margin-top: 20px;
        background: url("../assets/img/navside/icon_logout_w.png") top center no-repeat;
        background-size: 100%;
    }

    /deep/ .el-menu-item-group .el-menu-item {
        height: 25px !important;
        line-height: 25px !important;
    }

    /deep/ .el-menu-item {
        height: 30px;
        line-height: 20px;
    }

</style>