仓库管理系统08

头部编写

<template>

    <div style="display: flex; line-height: 60px;">

        <div style="margin-top: 8px;">

            <i :class="icon" style="font-size: 20px;cursor: pointer;" @click="collapse"></i>

        </div>

        <div style="flex: 1px; text-align: center; font-size: 34px;">

            <span>欢迎来到仓库管理系统</span>

        </div>

      <el-dropdown>

        <span>{{user.name}}</span><i class="el-icon-arrow-down" style="margin-left: 5px;"></i>

        <el-dropdown-menu trigger="click">

          <el-dropdown-item @click.native="toUser">个人资料</el-dropdown-item>

          <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>

        </el-dropdown-menu>

      </el-dropdown>

</div>

</template>

<script>

    export default{

        name:"Header",

        data(){

            return{

                user: JSON.parse(sessionStorage.getItem('CurUser'))

            }

        },

        props:{

            icon:String,

        },

        components:{

        },

        methods:{

            toUser(){

                this.$router.push("/Home")

            },

            logout(){

                this.$confirm('您确定退出登录么?','提示',{

                    confirmButtonText:'确定',

                    type:'warning',

                    center:true,

                })

                .then(()=>{

                    this.$message({

                        type:'success',

                        message:'退出成功',

                    })

                    this.$router.push("/")

                    sessionStorage.clear()

                })

                .catch(()=>{

                    this.$message({

                        type:'info',

                        message:'已取消退出登录',

                    })

                })

            },

            collapse(){

                this.$emit('doCollapse')

            }

        },

        created(){

            this.$router.push('/Home')

        }

    }

</script>