<template>
|
<el-row align="middle" class="header">
|
<el-col :span="12">
|
<el-space>
|
<el-button @click="collapsedSider" icon="Fold" circle :class="rotateIcon" />
|
<el-breadcrumb separator="/" style="white-space: nowrap">
|
<el-breadcrumb-item v-for="(t, i) in navTitles" :key="i">{{ t }}</el-breadcrumb-item>
|
</el-breadcrumb>
|
</el-space>
|
</el-col>
|
<el-col :span="12" class="logout">
|
<FYBgTaskDialog></FYBgTaskDialog>
|
<el-button icon="SwitchButton" @click="logout">退出登录</el-button>
|
</el-col>
|
</el-row>
|
</template>
|
|
<script>
|
import { useUserStore } from '@/stores/userToken'
|
import { useRouter } from 'vue-router';
|
import { ElNotification } from 'element-plus';
|
export default {
|
setup() {
|
const userStore = useUserStore()
|
const router = useRouter()
|
return { userStore, router }
|
},
|
name: 'CoreHeader',
|
props: {
|
collapse: {
|
type: Boolean,
|
default: false
|
},
|
navTitles: {
|
type: Array,
|
default: () => ['home', 'promotion list', 'promotion detail']
|
}
|
},
|
data() {
|
return {
|
isCollapsed: this.collapse
|
};
|
},
|
watch: {},
|
computed: {
|
/**
|
* 图标旋转
|
*/
|
rotateIcon() {
|
return ['menu-icon', this.isCollapsed ? 'rotate-icon' : ''];
|
}
|
},
|
methods: {
|
/**
|
* 收缩侧边栏
|
*/
|
collapsedSider() {
|
this.isCollapsed = !this.isCollapsed;
|
this.$emit('collapsedSider', this.isCollapsed);
|
},
|
logout() {
|
this.userStore.logout()
|
this.router.push('/common/loginView')
|
ElNotification({
|
title: `退出成功`,
|
message: `退出成功`,
|
type: 'success',
|
// offset: 170,
|
position: 'bottom-left',
|
});
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.header {
|
/* background-color: aqua; */
|
height: 60px;
|
}
|
|
.menu-icon {
|
transition: all 0.3s;
|
}
|
|
.rotate-icon {
|
transform: rotate(-90deg);
|
}
|
|
.logout {
|
/* background-color: aliceblue; */
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
}
|
</style>
|
