<script setup>
|
import { fullscreenToggel } from '@/utils/util';
|
import { useStore } from 'vuex';
|
import { ElMessage } from 'element-plus'
|
const router = useRouter();
|
const store = useStore();
|
const dropdownClick = val => {
|
if (val === 'info'){
|
info()
|
}else if (val === 'logOut'){
|
logOut()
|
}
|
};
|
|
const logOut = () =>{
|
store.commit('SET_THEME_NAME', '');
|
store.dispatch('LogOut').then(() => {
|
router.push({ path: '/login' });
|
setTimeout(() => location.reload());
|
});
|
}
|
|
const info = () =>{
|
ElMessage.warning('加急开发中...')
|
console.log('点击了个人信息');
|
}
|
</script>
|
|
<template>
|
<div class="userOperate">
|
<img alt="" src="@/assets/images/home/homeRight/operate1.png" title="进入后台"/>
|
|
<el-dropdown @command="dropdownClick">
|
<img alt="" src="@/assets/images/home/homeRight/operate2.png"/>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item command="info">个人信息</el-dropdown-item>
|
<el-dropdown-item command="logOut">退出登录</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
<img alt="" src="@/assets/images/home/homeRight/operate3.png" @click="fullscreenToggel" title="全屏切换"/>
|
</div>
|
</template>
|
|
<style scoped lang="scss">
|
.userOperate {
|
position: absolute;
|
right: 27px;
|
top: -35px;
|
width: 132px;
|
height: 38px;
|
display: flex;
|
justify-content: space-between;
|
|
> img {
|
cursor: pointer;
|
}
|
}
|
</style>
|
