mirror of
https://github.com/iczer/vue-antd-admin.git
synced 2025-04-06 03:57:44 +08:00
63 lines
1.2 KiB
Vue
63 lines
1.2 KiB
Vue
<template>
|
|
<a-dropdown>
|
|
<div class="header-avatar" style="cursor: pointer">
|
|
<a-avatar class="avatar" size="small" shape="circle" :src="user.avatar"/>
|
|
<span class="name">{{user.name}}</span>
|
|
</div>
|
|
<a-menu :class="['avatar-menu']" slot="overlay">
|
|
<a-menu-item>
|
|
<a-icon type="user" />
|
|
<span>个人中心</span>
|
|
</a-menu-item>
|
|
<a-menu-item>
|
|
<a-icon type="setting" />
|
|
<span>设置</span>
|
|
</a-menu-item>
|
|
<a-menu-divider />
|
|
<a-menu-item>
|
|
<a @click="logout">
|
|
<a-icon type="poweroff" />
|
|
<span>退出登录</span>
|
|
</a>
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</a-dropdown>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapState} from 'vuex'
|
|
import {logout} from '@/services'
|
|
|
|
export default {
|
|
name: 'HeaderAvatar',
|
|
computed: {
|
|
...mapState('account', ['user']),
|
|
},
|
|
methods: {
|
|
logout() {
|
|
logout()
|
|
this.$router.push('/login')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.header-avatar{
|
|
display: inline-flex;
|
|
.avatar, .name{
|
|
align-self: center;
|
|
}
|
|
.avatar{
|
|
margin-right: 8px;
|
|
}
|
|
.name{
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.avatar-menu{
|
|
width: 150px;
|
|
}
|
|
|
|
</style>
|