114 lines
3.3 KiB
Vue
114 lines
3.3 KiB
Vue
<!--
|
||
* _oo0oo_
|
||
* o8888888o
|
||
* 88" . "88
|
||
* (| -_- |)
|
||
* 0\ = /0
|
||
* ___/`---'\___
|
||
* .' \\| |// '.
|
||
* / \\||| : |||// \
|
||
* / _||||| -:- |||||- \
|
||
* | | \\\ - /// | |
|
||
* | \_| ''\---/'' |_/ |
|
||
* \ .-\__ '-' ___/-. /
|
||
* ___'. .' /--.--\ `. .'___
|
||
* ."" '< `.___\_<|>_/___.' >' "".
|
||
* | | : `- \`.;`\ _ /`;.`/ - ` : | |
|
||
* \ \ `_. \_ __\ /__ _/ .-` / /
|
||
* =====`-.____`.___ \_____/___.-`___.-'=====
|
||
* `=---='
|
||
*
|
||
*
|
||
* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||
*
|
||
* 佛祖保佑 永不宕机 永无BUG
|
||
*
|
||
* 佛曰:
|
||
* 写字楼里写字间，写字间里程序员；
|
||
* 程序人员写程序，又拿程序换酒钱。
|
||
* 酒醒只在网上坐，酒醉还来网下眠；
|
||
* 酒醉酒醒日复日，网上网下年复年。
|
||
* 但愿老死电脑间，不愿鞠躬老板前；
|
||
* 奔驰宝马贵者趣，公交自行程序员。
|
||
* 别人笑我忒疯癫，我笑自己命太贱；
|
||
* 不见满街漂亮妹，哪个归得程序员？
|
||
*
|
||
* @Descripttion:
|
||
* @version:
|
||
* @Date: 2021-04-20 11:06:21
|
||
* @LastEditors: huzhushan@126.com
|
||
* @LastEditTime: 2021-04-21 12:47:50
|
||
* @Author: huzhushan@126.com
|
||
* @HomePage: https://huzhushan.gitee.io/vue3-element-admin
|
||
* @Github: https://github.com/huzhushan/vue3-element-admin
|
||
* @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
|
||
-->
|
||
|
||
<template>
|
||
<el-dropdown trigger="click">
|
||
<div class="userinfo">
|
||
<template v-if="!userinfo">
|
||
<i class="el-icon-user" />
|
||
admin
|
||
</template>
|
||
<template v-else>
|
||
<img class="avatar" :src="userinfo.avatar" />
|
||
{{ userinfo.name }}
|
||
</template>
|
||
</div>
|
||
<template #dropdown>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item>个人中心</el-dropdown-item>
|
||
<el-dropdown-item>修改密码</el-dropdown-item>
|
||
<el-dropdown-item>锁定屏幕</el-dropdown-item>
|
||
<el-dropdown-item @click="logout">退出登录</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</template>
|
||
<script>
|
||
import { computed, defineComponent } from 'vue'
|
||
import { useStore } from 'vuex'
|
||
import { useRouter } from 'vue-router'
|
||
export default defineComponent({
|
||
setup() {
|
||
const store = useStore()
|
||
const router = useRouter()
|
||
const userinfo = computed(() => store.state.account.userinfo)
|
||
const logout = () => {
|
||
store.commit('app/clearToken')
|
||
store.commit('account/clearUserinfo')
|
||
store.dispatch('tags/delAllTags')
|
||
router.push('/login')
|
||
}
|
||
return {
|
||
userinfo,
|
||
logout,
|
||
}
|
||
},
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.userinfo {
|
||
padding: 0 16px;
|
||
line-height: 48px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
&:hover {
|
||
background: #f5f5f5;
|
||
}
|
||
.el-icon-user {
|
||
font-size: 20px;
|
||
margin-right: 8px;
|
||
}
|
||
.avatar {
|
||
margin-right: 8px;
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
</style>
|