You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.2 KiB
62 lines
1.2 KiB
<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 style="margin-right: 8px;" type="poweroff" /> |
|
<span>退出登录</span> |
|
</a> |
|
</a-menu-item> |
|
</a-menu> |
|
</a-dropdown> |
|
</template> |
|
|
|
<script> |
|
import {mapGetters} from 'vuex' |
|
import {logout} from '@/services' |
|
|
|
export default { |
|
name: 'HeaderAvatar', |
|
computed: { |
|
...mapGetters('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>
|
|
|