FE_exam_client/src/layouts/header/index.vue

<template>
    <div>
        <div class="header">
            <img class="system-name" src="../../assets/img/system-fullname.png">
            <el-dropdown class="user-wrap" @command="userCommand">
                <div class="user">
                    <el-avatar :size="40" :src="avatar"></el-avatar>
                    <span class="username">{{userName}}</span>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="help">用户手册</el-dropdown-item>
                    <el-dropdown-item command="person">个人资料</el-dropdown-item>
                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <pdf :visible.sync="pdfVisible" :src.sync="pdfSrc"></pdf>
    </div>
</template>
<script>
import { mapState,mapActions } from 'vuex'
import Setting from '@/setting'
import pdf from '@/components/pdf'
export default {
    data() {
        return {
            pdfVisible: false,
            pdfSrc: '',
            showBackList: Setting.layout.hideNavList,
        };
    },
    components: { pdf },
    computed: {
        ...mapState('user', [
            'userId','avatar','userName'
        ]),
        showBack(){
            let route = this.$route.name
            if(this.showBackList.includes(route)) return true
            return false
        }
    },
    mounted(){
        
    },
    methods: {
        ...mapActions('user', [
            'logout'
        ]),
        userCommand(command){
            if(command == 'help'){
                this.pdfVisible = true
                this.pdfSrc = 'http://39.108.250.202/template/%E8%B6%85%E7%AB%9E%E6%95%B0%E5%AD%97%E5%8C%96%E8%80%83%E8%AF%95%E7%B3%BB%E7%BB%9F-%E6%93%8D%E4%BD%9C%E6%89%8B%E5%86%8C%EF%BC%88%E5%AD%A6%E7%94%9F%E7%AB%AF%EF%BC%89.pdf'
            }else if(command == 'person'){
                this.$router.push('/setting/person')
            }else{
                this.logout()
            }
        }
    },
};
</script>
<style lang="scss" scoped>
    .header {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 40px 20px 24px;
        font-size: 16px;
        color: #333;
        background-color: #fff;
        box-sizing: border-box;
        .system-name {
            width: 326px;
        }
        .user-wrap {
            display: flex;
            align-items: center;

            .user{
                display: inline-flex;
                align-items: center;
                cursor: pointer;
                .username{
                    margin-left: 10px;
                    color: #000;
                    font-size: 16px;
                }
            }
        }
    }
</style>