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
| <template>
| <el-row align="middle" class="header">
| <el-col :span="1">
| <el-button
| @click="collapsedSider"
| icon="Fold"
| circle
| :class="rotateIcon"
| />
| </el-col>
| <el-col :span="18">
| <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-col>
| <el-col :span="5" class="logout">
| <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>
|
|
