<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">退出登录</el-button>
|
</el-col>
|
</el-row>
|
</template>
|
|
<script>
|
export default {
|
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);
|
}
|
}
|
};
|
</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>
|
