简单用户管理系统（P-14）

顶部菜单导航的设计

• 顶部菜单，需要定义一个HeadNav.vue, 在组件中去定义，然后根据内容，引入到index.vue中

export default {
    name: "index",
    components: {
        HeadNav
    }
};

HeadNav.vue 分成左右两个部位
我们用el-row去实现左右，右侧的还需要一个Dropdown，去实现，同是具体的的点击事件和命令看如下代码，当然你记得要在store.js中去action中增加一个clearCurrentState

clearCurrentState: ({commit}) => {
        commit(types.SET_IS_AUTHENTICATED, false);
        commit(types.SET_USER, null)
    }

其他的就是对应Dropdown的事件方法

<template>
    <header class="head-nav">
        <el-row>
            <el-col :span="6" class="logo-container">
                <img src="../assets/logo.png" class="logo" alt="图标">
                <span class="title">智慧党建云平台</span>
            </el-col>
            <el-col :span="6" class="user">
                <div class="userinfo">
                    <!-- <img src="//www.gravatar.com/avatar/97afc159d9bd9fc17d31e9eb298001ca?s=200&r=pg&d=mm" class="avatar" alt="">
                    <div class="welcome">
                        <p class="name comename">欢迎</p>
                        <p class="name avatarname">管理员</p>
                    </div> -->
                    <span class="username">
                        <!-- 指令菜单 -->
                        <el-dropdown trigger="click"  @command='setDialogInfo'>
                            <span class="el-dropdown-link">
                                <img :src="user.avatar" class="avatar" alt="">
                                <div class="welcome">
                                    <p class="name comename">欢迎</p>
                                    <p class="name avatarname">{{user.name}}</p>
                                </div>
                                <i class="el-icon-caret-bottom el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="info">个人信息</el-dropdown-item>
                                <el-dropdown-item command="logout">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </span>
                </div>
            </el-col>
        </el-row>
    </header>
</template>

<script>
    export default {
        name: 'head-nav',
        computed: {
            user() {
                return this.$store.getters.user;
            }
        },
         methods: {
            setDialogInfo(command) {
                if(!command) {
                    console.log("test");
                    this.$message("菜单选项缺少command属性");
                    return; 
                    this.$message('click on item ' + command);
                } 
                switch(command) {
                    case "info":
                        this.showInfoList();
                        break;
                    case "logout":
                        this.logout();
                        break; 
                }
            },
            showInfoList() {
                // 个人信息
                this.$router.push("/infoshow");
            },
            logout() {
                 // 清除token
                localStorage.removeItem('eleToken');
                this.$store.dispatch("clearCurrentState");
                
                // 页面跳转
                this.$router.push('/login')
            }
        }
    }
</script>

<style scoped>
    .head-nav {
        width: 100%;
        height: 60px;
        min-width: 600px;
        padding: 5px;
        background: #324057;
        color: #fff;
        border-bottom: 1px solid #1f2d3d;
    }
    .logo-container {
        line-height: 60px;
        min-width: 400px;
    }
    .logo {
        height: 50;
        width: 50px;
        margin-right: 5px;
        vertical-align: middle;
        display: inline-block; /* 垂直居中 */
    }
    .title {
        vertical-align: middle;
        font-size: 22px;
        font-family: "Microsoft YaHei";
        letter-spacing: 3px; /* 字间距 */
    }
    .user {
        line-height: 60px;
        text-align: right;
        float: right;
        padding-right: 10px;
    }
    .avatar {
        width: 40px;
        height: 40px;
        vertical-align: middle;
        display: inline-block;
        border-radius: 50%;
    }
    .welcome {
        display: inline-block;
        width: auto;
        vertical-align: middle;
        padding: 0 5px;
    }
    .name {
        line-height: 20px;
        text-align: center;
        font-size: 14px;
    }
    .comename {
        font-size: 12px;
    }
    .avatarname {
        color: #409eff;
        font-weight: bolder;
    }
    .username {
        cursor: pointer;
        margin-right: 5px;
    }
    .el-dropdown {
        color: #fff;
    }
    
</style>