zmc
2023-08-15 60076cbbe1da6cc8ed3a4ebb8f67e92ea9be9e4a
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<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>
      <span class="head-text">{{ selected }}</span>
      
      
    <!-- 面包屑 -->
    <!-- <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;
    // background-color: #606266;
    background-color: #EBEDF0;
    color: black;
#c6e2ff
.el-icon {
        margin-right: 17px;
    }
}
.head-text {
  margin-left: 10px;
}
.el-dropdown {
    margin-left: auto;
    .el-dropdown-link {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>