code init

src/components/comHeader/index.vue

@@ -0,0 +1,159 @@
+<!-- header头部 面包屑、退出 -->
+<template>
+  <div class="com-header">
+    <div class="toggle-btn iconfont" style="color: #333333;" @click="handleToggleSideBar">&#xe647;</div>
+    <div class="header-content-wrap">
+      <div class="header-left">
+        <!--面包屑-->
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item
+            v-for="(item, index) in routerList"
+            :key="index"
+          >
+            {{ item.meta.title }}
+          </el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <!-- header头部 右侧内容 当前登录人和退出-->
+      <div class="header-right">
+        <div class="user-info">
+          <el-dropdown
+            trigger="click"
+            @command="handleCommand"
+          >
+            <div class="user-box">
+              <img :src="userAvator" v-if="$store.getters.userInfo.avator">
+              <span class="iconfont" v-else style="color: #333333;">&#xe69b;</span>
+              <span>您好，{{ $store.getters.userInfo.uName }}</span>
+              <i class="el-icon-arrow-down"/>
+            </div>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="loginOut">退出</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapMutations, mapGetters } from 'vuex'
+export default {
+  name: 'ComHeader',
+  data () {
+    return {
+      routerList: [] // 面包屑数组
+    }
+  },
+  created () {
+    // 渲染面包屑数组
+    this.routerList = this.$route.matched
+  },
+  computed: {
+    // 获取用户头像
+    userAvator () {
+      return this.$store.getters.userInfo.avator || require('@/assets/images/avator_default.png')
+    },
+    ...mapGetters(['isCollapse'])
+  },
+  watch: {
+    // 监听路由 重新渲染面包屑
+    $route () {
+      this.routerList = this.$route.matched
+    }
+  },
+  methods: {
+    // 点击下拉选项事件
+    handleCommand (command) {
+      // 退出登录
+      if (command === 'loginOut') {
+        this.$confirm('您确认要退出吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+          confirmButtonClass: 'common-button-primary',
+          roundButton: true
+        }).then(() => {
+          this.$store.commit('setTypeFlag', 'loginOut')
+          this.$http.get('logout', {}, {
+            _this: this
+          }, res => {
+            this.$store.dispatch('logout')
+            this.$router.push('/login')
+          }, e => {})
+        }).catch(() => {
+        })
+      }
+    },
+
+    handleToggleSideBar() {
+      this.toggleSideBar(!this.isCollapse)
+    },
+
+    ...mapMutations(['toggleSideBar'])
+  }
+}
+</script>
+<style lang="less" scoped>
+  .com-header{
+    padding: 0 10px;
+    height: 50px;
+    background: #ffffff;
+    border-bottom: 1px solid #e5e5e5;
+    display: flex;
+    align-items: center;
+    .toggle-btn {
+      margin-right: 8px;
+      font-size: 28px;
+      &:hover {
+        cursor: pointer;
+        color: #888;
+      }
+    }
+    .header-content-wrap {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .header-right {
+      display: flex;
+      align-items: center;
+      .el-dropdown{
+        .user-box {
+          display: flex;
+          align-items: center;
+          .iconfont {
+            font-size: 22px;
+            margin-right: 5px;
+          }
+          & > img{
+            width: 25px;
+          }
+        }
+        .user-box:hover{
+          cursor: pointer;
+        }
+        .el-dropdown-menu {
+          outline: none;
+          border: none;
+        }
+      }
+      .search {
+        font-size: 20px;
+        color: rgba(165, 165, 165, 1);
+        position: relative;
+        &:hover {
+          cursor: pointer;
+          color: #666;
+        }
+      }
+      .line {
+        width: 1px;
+        height: 18px;
+        background: #D1D1D1;
+        margin: 0 12px;
+      }
+    }
+  }
+</style>