vue2.0 - layout组件（四）Header页面布局

1. Header页面布局

<template>
  <div class="header_container">
    <div class="logo white_color">
      <span>后台管理系统</span>
    </div>
    <div class="header-content">
      <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
    </div>
    <div class="header-right">
    <!-- 展开折叠 -->
      <span
        style="
          display: inline-block;
          color: #ffffff;
          margin-right: 5px;
          font-size: 16px;
          font-weight: 600;
        "
        >{
    
    {
    
     user }}</span
      >
      <el-dropdown class="avatar-container" trigger="click" placement="bottom">
        <div class="avatar-wrapper">
          <!-- 用户头像 -->
          <!-- <el-image class="user-avatar" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi.qqkou.com%2Fi%2F1a4155805545x2653312013b26.jpg&refer=http%3A%2F%2Fi.qqkou.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657848543&t=993c55313322f789b72d367f9b7a2d10"></el-image> -->
          <i class="el-icon-caret-bottom" />
        </div>
       <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <el-dropdown-item divided @click.native="logout">
            <span style="display:block;">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
 
<script>
import {
    
     mapGetters } from 'vuex'
import Hamburger from '@/components/Hamburger'
export default {
    
    
  data() {
    
    
    return {
    
    
      user: '管理员',
      Names: ''
    }
  },
  components: {
    
    
    Hamburger
  },
  computed: {
    
    
    ...mapGetters([
      'name',
      'staffPhoto',
      'sidebar',
      'avatar'
    ]),
   // 是否关闭侧边栏
    isCollapse() {
    
    
      return !this.sidebar.opened
    }
  },
  methods: {
    
    
    // 折叠展开
    toggleSideBar() {
    
    
      this.$store.dispatch('app/toggleSideBar')
    },
    info() {
    
    
      //   var account = JSON.parse(localStorage.getItem('token'))
      //   console.log(account, 'account')
      //   this.user = account.account
    },
    logout() {
    
    
      this.user = "";
      //   localStorage.removeItem('token')
      this.$router.push("/login");
    },
  },
};
</script>
 
<style lang='scss'>
.header_container{
    
    
  display: flex;
  justify-content: space-between;
}
.header-content{
    
    
  display: flex;
  margin-left: 26px;
  flex: 1;
}
.header-right {
    
    
  margin-right: 26px;
  display: flex;
  flex-direction: row;
  align-items: center;
  .avatar-container {
    
    
    display: inline-block;
    cursor: pointer;
    transition: background 0.3s;
    .avatar-wrapper {
    
    
      display: flex;
      flex-direction: row;
      align-items: center;
      .user-avatar {
    
    
        cursor: pointer;
        width: 30px;
        height: 30px;
        border-radius: 10px;
        margin-right: 5px;
      }
      .el-icon-caret-bottom {
    
    
        color: #FFF;
        cursor: pointer;
        font-size: 12px;
      }
    }
  }
}
</style>

2. 此时会报错-因为页面用到了一个侧边栏导航折叠组件，需要在src下的components文件中添加此组组件，没有components文件的可以自行创建

3. Hamburger组件页面结构

<template>
  <div style="padding: 0 15px;" @click="toggleClick">
    <svg
      :class="{'is-active':isActive}"
      class="hamburger"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="64"
      height="64"
      fill="#fff"
    >
      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
    </svg>
  </div>
</template>

<script>
export default {
    
    
  name: 'Hamburger',
  props: {
    
    
    isActive: {
    
    
      type: Boolean,
      default: false
    }
  },
  methods: {
    
    
    toggleClick() {
    
    
      this.$emit('toggleClick')
    }
  }
}
</script>

<style scoped>
.hamburger {
    
    
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

.hamburger.is-active {
    
    
  transform: rotate(180deg);
}
</style>

4. SvgIcon页面结构

<template>
  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
import {
    
     isExternal } from '@/utils/validate'

export default {
    
    
  name: 'SvgIcon',
  props: {
    
    
    iconClass: {
    
    
      type: String,
      required: true
    },
    className: {
    
    
      type: String,
      default: ''
    }
  },
  computed: {
    
    
    isExternal() {
    
    
      return isExternal(this.iconClass)
    },
    iconName() {
    
    
      return `#icon-${
      
      this.iconClass}`
    },
    svgClass() {
    
    
      if (this.className) {
    
    
        return 'svg-icon ' + this.className
      } else {
    
    
        return 'svg-icon'
      }
    },
    styleExternalIcon() {
    
    
      return {
    
    
        mask: `url(${
      
      this.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${
      
      this.iconClass}) no-repeat 50% 50%`
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
    
    
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
    
    
  background-color: currentColor;
  mask-size: cover!important;
  display: inline-block;
}
</style>

5 .完成Header组件