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组件