You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
3.2 KiB
Vue
116 lines
3.2 KiB
Vue
5 years ago
|
<template>
|
||
|
|
<div :class="['header', collapsed ? 'collapsed-header' :'']">
|
||
|
|
<div class="header-left">
|
||
|
|
<a-layout-header style="background: #fff; padding: 0">
|
||
|
|
<a-icon
|
||
|
|
class="trigger"
|
||
|
|
:type="collapsed ? 'menu-unfold' : 'menu-fold'"
|
||
|
|
@click="collapsedFlag"
|
||
|
|
/>
|
||
|
|
</a-layout-header>
|
||
|
|
</div>
|
||
|
|
<div class="header-right">
|
||
|
|
<div class="header-top-right-circle" @click="visible = !visible"></div>
|
||
|
|
<a-popover id="popover" v-model="visible" placement="bottom" trigger="click">
|
||
|
|
<a href="javascript:;">
|
||
|
|
{{
|
||
|
|
userInfo.name ? userInfo.name : "userName"
|
||
|
|
}}
|
||
|
|
</a>
|
||
|
|
<div class="flex flex-column" :style="{ 'min-width': '78px' }" slot="content">
|
||
|
|
<a
|
||
|
|
class="block mb16"
|
||
|
|
href="javascript:;"
|
||
|
|
@click="visible = false;$router.push({name: 'center'})"
|
||
|
|
>个人中心</a>
|
||
|
|
<a href="javascript:;" @click="logout">退出登录</a>
|
||
|
|
</div>
|
||
|
|
</a-popover>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {mapState, mapMutations, mapGetters} from "vuex";
|
||
|
|
export default {
|
||
|
|
name: "PageHeader",
|
||
|
|
computed: {
|
||
|
|
...mapState(["aside_collapsed", "userInfo"]),
|
||
|
|
...mapGetters(['getAside_collapsed'])
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
getAside_collapsed: function (newValue) {
|
||
|
|
console.log(newValue)
|
||
|
|
this.collapsed = newValue
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
visible: false,
|
||
|
|
collapsed:false
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
...mapMutations(["setState"]),
|
||
|
|
logout() {
|
||
|
|
this.visible = false;
|
||
|
|
localStorage.clear();
|
||
|
|
sessionStorage.clear();
|
||
|
|
this.$axios({
|
||
|
|
url: "/app/userCenter",
|
||
|
|
method: "GET"
|
||
|
|
}).then(res => {
|
||
|
|
window.open(res.data.url + "?action=logout", "_self");
|
||
|
|
});
|
||
|
|
},
|
||
|
|
collapsedFlag(){
|
||
|
|
// console.log(11111)
|
||
|
|
this.collapsed = !this.collapsed
|
||
|
|
this.$store.commit('aside_collapsed',this.collapsed);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.header {
|
||
|
|
background: #ffffff;
|
||
|
|
display:flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
height: 64px;
|
||
|
|
/*border: solid 1px skyblue;*/
|
||
|
|
box-shadow: 0px 2px 5px rgba(0, 21, 41, 0.15);
|
||
|
|
/*margin-bottom: 2px;*/
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
width: calc(100% - 270px);
|
||
|
|
&-left{
|
||
|
|
.trigger{
|
||
|
|
font-size: 18px;
|
||
|
|
line-height: 64px;
|
||
|
|
padding: 0 24px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: color 0.3s;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-right {
|
||
|
|
display: flex;
|
||
|
|
align-items: flex-start;
|
||
|
|
padding-right: 20px;
|
||
|
|
&-circle {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: #fff;
|
||
|
|
margin-right: 8px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.collapsed-header{
|
||
|
|
width: calc(100% - 80px);
|
||
|
|
}
|
||
|
|
</style>
|