App.vue
2.86 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<template>
<div id="app">
<VHeader v-if="headerShow"></VHeader>
<!--<transition :name="transitionName">-->
<!--<keep-alive>-->
<!--<router-view class="main-wrap transitionBody"></router-view>-->
<!--</keep-alive>-->
<!--</transition>-->
<keep-alive>
<router-view class="main-wrap transitionBody"></router-view>
</keep-alive>
<VFooter v-if="footerShow"></VFooter>
<div id="backToTop" class="backToTop" @click="scrollIntoView"></div>
</div>
</template>
<script>
import VHeader from './components/VHeader'
import VFooter from './components/VFooter'
export default {
name: 'App',
components:{
VHeader,
VFooter
},
data() {
return {
footerShow: true,
headerShow: true,
transitionName: 'transitionLeft',
scrollShow: false,
}
},
mounted() {
window.addEventListener('scroll',this.scrollToTop)
},
methods: {
scrollToTop() {
const topBtn = document.getElementById('backToTop')
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
if(scrollTop > 20){
topBtn.style.display = 'block'
}else{
topBtn.style.display = 'none'
}
},
scrollIntoView() {
const timer = setInterval(function () {
let osTop = document.documentElement.scrollTop || document.body.scrollTop
let ispeed = Math.floor(-osTop / 5)
document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed
if (osTop === 0) {
clearInterval(timer)
}
}, 30)
}
},
watch: {
$route(to, from){
console.log(this.$route.path)
if(this.$route.path === '/login'){
this.headerShow = this.footerShow = false
}else {
this.headerShow = this.footerShow = true
}
const barArr = ['home','/solution','/enterprise']
const compare = barArr.indexOf(to.path) > barArr.indexOf(from.path)
this.transitionName = compare ? 'transitionLeft' : 'transitionRight'
}
}
}
</script>
<style>
#app {
display: flex;
flex-flow: column;
min-height: 100vh;
position: relative;
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.main-wrap{
flex: 1;
}
.transitionBody{
transition: all .4s ease-out;
}
.transitionLeft-enter,
.transitionRight-leave-active {
transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
}
.transitionLeft-leave-active,
.transitionRight-enter {
transform: translate(-100%, 0);
-webkit-transform: translate(-100%, 0);
}
.backToTop{
position: fixed;
width: 22px;
height: 22px;
background: url("assets/images/back.png") no-repeat;
right:20px;
bottom: 10px;
display: none;
cursor: pointer;
}
</style>