67 lines
1.3 KiB
Vue
67 lines
1.3 KiB
Vue
<!--
|
|
* @Author: gtz
|
|
* @Date: 2022-07-25 14:18:00
|
|
* @LastEditors: gtz
|
|
* @LastEditTime: 2022-07-28 17:00:02
|
|
* @Description: file content
|
|
* @FilePath: \hf-pda\src\App.vue
|
|
-->
|
|
<template>
|
|
<div id="app">
|
|
<transition :name="transitionName">
|
|
<router-view class="child-view"/>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'App',
|
|
data () {
|
|
return {
|
|
transitionName: null
|
|
}
|
|
},
|
|
watch: {
|
|
'$route' (to, from) {
|
|
let isBack = this.$router.isBack
|
|
if (isBack) {
|
|
this.transitionName = 'slide-right'
|
|
} else {
|
|
this.transitionName = 'slide-left'
|
|
}
|
|
this.$router.isBack = false
|
|
}
|
|
},
|
|
mounted () {
|
|
// if (!this.$store.state.user.userInfo) {
|
|
// this.$store.commit('user/updateUserInfo', JSON.parse(window.sessionStorage.getItem('userInfo')))
|
|
// }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.child-view {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: scroll;
|
|
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
|
|
}
|
|
.slide-left-enter,
|
|
.slide-right-leave-active {
|
|
opacity: 0;
|
|
-webkit-transform: translate(50px, 0);
|
|
transform: translate(50px, 0);
|
|
}
|
|
.slide-left-leave-active,
|
|
.slide-right-enter {
|
|
opacity: 0;
|
|
-webkit-transform: translate(-50px, 0);
|
|
transform: translate(-50px, 0);
|
|
}
|
|
</style>
|