<script >
|
import { isCollapse } from './isCollapse'
|
import { selectedName } from './selectName'
|
export default {
|
|
data() {
|
return{
|
isCollapseHeader: isCollapse , //折叠
|
selected: selectedName,
|
// selectedName: '',
|
// isCollapse: false
|
}
|
},
|
mounted(){
|
// 订阅事件，并在事件触发时更新选中的名字
|
// this.$app.eventBus.on('updateSelectedName', (name) => {
|
// this.selectedName = name;
|
// });
|
// EventBus.$on('updateSelectedName', (name) => {
|
// this.selectedName = name
|
// })
|
},
|
methods: {
|
exit(){
|
this.$router.push('/login') // 假设登录成功后跳转到 '/dashboard' 页面
|
}
|
}
|
}
|
</script>
|
|
<template>
|
|
<el-header>
|
<!-- 图标 -->
|
<!-- @click="isCollapseHeader = !isCollapseHeader" -->
|
<el-icon class="clickable" @click="isCollapseHeader = !isCollapseHeader" title="折叠">
|
<i-ep-Expand v-show="isCollapseHeader" />
|
<i-ep-Fold v-show="!isCollapseHeader"/>
|
</el-icon>
|
{{ selected }}
|
|
<!-- 面包屑 -->
|
<!-- <el-breadcrumb separator="/">
|
<el-breadcrumb-item :to="{ path: '/hdata' }">主页</el-breadcrumb-item>
|
<el-breadcrumb-item><a href="/">promotion management</a></el-breadcrumb-item> -->
|
<!-- <el-breadcrumb-item>promotion list</el-breadcrumb-item>
|
<el-breadcrumb-item>promotion detail</el-breadcrumb-item> -->
|
<!-- </el-breadcrumb> -->
|
|
|
<!-- 下拉菜单 -->
|
<el-dropdown>
|
<span class="el-dropdown-link" >
|
<el-avatar class="clickable" :size="50" :src="'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
|
<el-icon class="el-icon--right ">
|
<i-ep-arrow-down />
|
</el-icon>
|
</span>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item @click="exit">退出</el-dropdown-item>
|
<!-- <el-dropdown-item divided>其他</el-dropdown-item> -->
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
|
</el-header>
|
</template>
|
|
<style lang="scss" scoped>
|
/* 可鼠标箭头变为可点击状态 */
|
.clickable {
|
cursor: pointer;
|
}
|
.el-header {
|
display: flex;
|
align-items: center;
|
color: white;
|
background-color: #0093E9;
|
background-image: linear-gradient(160deg, #2876aa 0%, #5cbfdd 100%);
|
|
|
|
.el-icon {
|
margin-right: 17px;
|
}
|
}
|
|
.el-dropdown {
|
margin-left: auto;
|
.el-dropdown-link {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
}
|
</style>
|
