查看 | 历史 | 提交 | 提交对比
long
2021-10-11 5eac3437002b58f9d1f387c3ca8f599a548f681d
提交 | 用户 | age
2a61f6 1 <template>
L 2   <div class="navbar">
3     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
4
5     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
6
7     <div class="right-menu">
8       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
9         <div class="avatar-wrapper">
10           <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
11           <i class="el-icon-caret-bottom" />
12         </div>
13         <el-dropdown-menu slot="dropdown">
14           <router-link to="/">
15             <el-dropdown-item>返回首页</el-dropdown-item>
16           </router-link>
17           <!-- <el-dropdown-item>
18             <span style="display: block">布局显示</span>
19           </el-dropdown-item> -->
20           <el-dropdown-item divided @click.native="logout">
21             <span style="display: block">退出登录</span>
22           </el-dropdown-item>
23         </el-dropdown-menu>
24       </el-dropdown>
25
26     </div>
27   </div>
28 </template>
29
30 <script>
31 import { mapGetters } from 'vuex'
32 import { getUserData, removeToken, removeUserData } from '@/utils/auth'
33 import Breadcrumb from '@/components/Breadcrumb'
34 import Hamburger from '@/components/Hamburger'
35
36 export default {
37   components: {
38     Breadcrumb,
39     Hamburger
40   },
41   data() {
42     return {
43       avatar: getUserData.avatar || 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
44     }
45   },
46   computed: {
47     ...mapGetters([
48       'sidebar',
49       'device'
50     ])
51   },
52   methods: {
53     toggleSideBar() {
54       this.$store.dispatch('app/toggleSideBar')
55     },
56     // 退出
57     logout() {
58       this.postFN({
59         url: 'admin/logout',
60         udData: { noToken: true },
61         mockData: {
62           code: 100,
63           msg: '',
64           data: {}
65         }
66       }, (inf) => {
67         removeToken() // 清除token
68         removeUserData() // 清除userData
69         this.$router.push(`/login?redirect=${this.$route.fullPath}`)
70       })
71     }
72   }
73 }
74 </script>
75
76 <style lang="scss" scoped>
77 .navbar {
78   height: 50px;
79   overflow: hidden;
80   position: relative;
81   background: #fff;
82   box-shadow: 0 1px 4px rgba(0,21,41,.08);
83
84   .hamburger-container {
85     line-height: 46px;
86     height: 100%;
87     float: left;
88     cursor: pointer;
89     transition: background .3s;
90     -webkit-tap-highlight-color:transparent;
91
92     &:hover {
93       background: rgba(0, 0, 0, .025)
94     }
95   }
96
97   .breadcrumb-container {
98     float: left;
99   }
100
101   .errLog-container {
102     display: inline-block;
103     vertical-align: top;
104   }
105
106   .right-menu {
107     float: right;
108     height: 100%;
109     line-height: 50px;
110
111     &:focus {
112       outline: none;
113     }
114
115     .right-menu-item {
116       display: inline-block;
117       padding: 0 8px;
118       height: 100%;
119       font-size: 18px;
120       color: #5a5e66;
121       vertical-align: text-bottom;
122
123       &.hover-effect {
124         cursor: pointer;
125         transition: background .3s;
126
127         &:hover {
128           background: rgba(0, 0, 0, .025)
129         }
130       }
131     }
132
133     .avatar-container {
134       margin-right: 30px;
135
136       .avatar-wrapper {
137         margin-top: 5px;
138         position: relative;
139
140         .user-avatar {
141           cursor: pointer;
142           width: 40px;
143           height: 40px;
144           border-radius: 10px;
145         }
146
147         .el-icon-caret-bottom {
148           cursor: pointer;
149           position: absolute;
150           right: -20px;
151           top: 25px;
152           font-size: 12px;
153         }
154       }
155     }
156   }
157 }
158 </style>