Skip to content

Commit 55a5bdc

Browse files
sendyasendya
committed
fix: sider box-shadow out of header z-index
1 parent 93f098e commit 55a5bdc

File tree

2 files changed

+129
-134
lines changed

2 files changed

+129
-134
lines changed

‎src/components/GlobalHeader/GlobalHeader.vue‎

Lines changed: 123 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,123 @@
1-
<template>
2-
<transition name="showHeader">
3-
<div v-if="visible" class="header-animat">
4-
<a-layout-header
5-
v-if="visible"
6-
:class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
7-
:style="{ padding: '0' }">
8-
<div v-if="mode === 'sidemenu'" class="header">
9-
<a-icon v-if="device==='mobile'" class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"/>
10-
<a-icon v-else class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle"/>
11-
<user-menu></user-menu>
12-
</div>
13-
<div v-else :class="['top-nav-header-index', theme]">
14-
<div class="header-index-wide">
15-
<div class="header-index-left">
16-
<logo class="top-nav-header" :show-title="device !== 'mobile'"/>
17-
<s-menu v-if="device !== 'mobile'" mode="horizontal" :menu="menus" :theme="theme" />
18-
<a-icon v-else class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle" />
19-
</div>
20-
<user-menu class="header-index-right"></user-menu>
21-
</div>
22-
</div>
23-
</a-layout-header>
24-
</div>
25-
</transition>
26-
</template>
27-
28-
<script>
29-
import UserMenu from '../tools/UserMenu'
30-
import SMenu from '../Menu/'
31-
import Logo from '../tools/Logo'
32-
import { mixin } from '@/utils/mixin'
33-
34-
export default {
35-
name: 'GlobalHeader',
36-
components: {
37-
UserMenu,
38-
SMenu,
39-
Logo
40-
},
41-
mixins: [mixin],
42-
props: {
43-
mode: {
44-
type: String,
45-
// sidemenu, topmenu
46-
default: 'sidemenu'
47-
},
48-
menus: {
49-
type: Array,
50-
required: true
51-
},
52-
theme: {
53-
type: String,
54-
required: false,
55-
default: 'dark'
56-
},
57-
collapsed: {
58-
type: Boolean,
59-
required: false,
60-
default: false
61-
},
62-
device: {
63-
type: String,
64-
required: false,
65-
default: 'desktop'
66-
}
67-
},
68-
data () {
69-
return {
70-
visible: true,
71-
oldScrollTop: 0
72-
}
73-
},
74-
mounted () {
75-
document.body.addEventListener('scroll', this.handleScroll, { passive: true })
76-
},
77-
methods: {
78-
handleScroll () {
79-
if (!this.autoHideHeader) {
80-
return
81-
}
82-
83-
const scrollTop = document.body.scrollTop + document.documentElement.scrollTop
84-
if (!this.ticking) {
85-
this.ticking = true
86-
requestAnimationFrame(() => {
87-
if (this.oldScrollTop > scrollTop) {
88-
this.visible = true
89-
} else if (scrollTop > 300 && this.visible) {
90-
this.visible = false
91-
} else if (scrollTop < 300 && !this.visible) {
92-
this.visible = true
93-
}
94-
this.oldScrollTop = scrollTop
95-
this.ticking = false
96-
})
97-
}
98-
},
99-
toggle () {
100-
this.$emit('toggle')
101-
}
102-
},
103-
beforeDestroy () {
104-
document.body.removeEventListener('scroll', this.handleScroll, true)
105-
}
106-
}
107-
</script>
108-
109-
<style lang="less">
110-
.header-animat{
111-
position: relative;
112-
z-index: 999;
113-
}
114-
.showHeader-enter-active {
115-
transition: all 0.25s ease;
116-
}
117-
.showHeader-leave-active {
118-
transition: all 0.5s ease;
119-
}
120-
.showHeader-enter, .showHeader-leave-to {
121-
opacity: 0;
122-
}
123-
</style>
1+
<template>
2+
<transition name="showHeader">
3+
<div v-if="visible" class="header-animat">
4+
<a-layout-header
5+
v-if="visible"
6+
:class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
7+
:style="{ padding: '0' }">
8+
<div v-if="mode === 'sidemenu'" class="header">
9+
<a-icon v-if="device==='mobile'" class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle"/>
10+
<a-icon v-else class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggle"/>
11+
<user-menu></user-menu>
12+
</div>
13+
<div v-else :class="['top-nav-header-index', theme]">
14+
<div class="header-index-wide">
15+
<div class="header-index-left">
16+
<logo class="top-nav-header" :show-title="device !== 'mobile'"/>
17+
<s-menu v-if="device !== 'mobile'" mode="horizontal" :menu="menus" :theme="theme" />
18+
<a-icon v-else class="trigger" :type="collapsed ? 'menu-fold' : 'menu-unfold'" @click="toggle" />
19+
</div>
20+
<user-menu class="header-index-right"></user-menu>
21+
</div>
22+
</div>
23+
</a-layout-header>
24+
</div>
25+
</transition>
26+
</template>
27+
28+
<script>
29+
import UserMenu from '../tools/UserMenu'
30+
import SMenu from '../Menu/'
31+
import Logo from '../tools/Logo'
32+
import { mixin } from '@/utils/mixin'
33+
34+
export default {
35+
name: 'GlobalHeader',
36+
components: {
37+
UserMenu,
38+
SMenu,
39+
Logo
40+
},
41+
mixins: [mixin],
42+
props: {
43+
mode: {
44+
type: String,
45+
// sidemenu, topmenu
46+
default: 'sidemenu'
47+
},
48+
menus: {
49+
type: Array,
50+
required: true
51+
},
52+
theme: {
53+
type: String,
54+
required: false,
55+
default: 'dark'
56+
},
57+
collapsed: {
58+
type: Boolean,
59+
required: false,
60+
default: false
61+
},
62+
device: {
63+
type: String,
64+
required: false,
65+
default: 'desktop'
66+
}
67+
},
68+
data () {
69+
return {
70+
visible: true,
71+
oldScrollTop: 0
72+
}
73+
},
74+
mounted () {
75+
document.body.addEventListener('scroll', this.handleScroll, { passive: true })
76+
},
77+
methods: {
78+
handleScroll () {
79+
if (!this.autoHideHeader) {
80+
return
81+
}
82+
83+
const scrollTop = document.body.scrollTop + document.documentElement.scrollTop
84+
if (!this.ticking) {
85+
this.ticking = true
86+
requestAnimationFrame(() => {
87+
if (this.oldScrollTop > scrollTop) {
88+
this.visible = true
89+
} else if (scrollTop > 300 && this.visible) {
90+
this.visible = false
91+
} else if (scrollTop < 300 && !this.visible) {
92+
this.visible = true
93+
}
94+
this.oldScrollTop = scrollTop
95+
this.ticking = false
96+
})
97+
}
98+
},
99+
toggle () {
100+
this.$emit('toggle')
101+
}
102+
},
103+
beforeDestroy () {
104+
document.body.removeEventListener('scroll', this.handleScroll, true)
105+
}
106+
}
107+
</script>
108+
109+
<style lang="less">
110+
.header-animat{
111+
position: relative;
112+
z-index: 2;
113+
}
114+
.showHeader-enter-active {
115+
transition: all 0.25s ease;
116+
}
117+
.showHeader-leave-active {
118+
transition: all 0.5s ease;
119+
}
120+
.showHeader-enter, .showHeader-leave-to {
121+
opacity: 0;
122+
}
123+
</style>

‎src/components/global.less‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -361,11 +361,11 @@ body {
361361
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
362362
position: relative;
363363
z-index: 10;
364-
height: auto;
364+
min-height: 100vh;
365365

366366
.ant-layout-sider-children {
367-
padding-top: 64px;
368367
overflow-y: hidden;
368+
369369
&:hover {
370370
overflow-y: auto;
371371
}
@@ -377,18 +377,13 @@ body {
377377
}
378378

379379
.logo {
380-
position: absolute;
381-
top: 0;
382-
left: 0;
383-
width: 100%;
380+
position: relative;
384381
height: 64px;
385-
line-height: 64px;
386382
padding-left: 24px;
387-
-webkit-transition: all 0.3s;
388-
transition: all 0.3s;
389-
background: #002140;
390383
overflow: hidden;
391-
z-index: 9;
384+
line-height: 64px;
385+
background: #002140;
386+
transition: all .3s;
392387

393388
img,
394389
svg,

0 commit comments

Comments
 (0)