From 2f72cf1a3a30b665619e7fcaa2657e225598554e Mon Sep 17 00:00:00 2001
From: flowstocktrading <tsm1258011@proton.me>
Date: Thu, 03 Nov 2022 18:22:54 +0800
Subject: [PATCH] 备份
---
src/App.vue | 34 +++++++++++++++++++++-------------
1 files changed, 21 insertions(+), 13 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 51d7db5..5aeea6b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,21 +13,21 @@
</div>
<div class="body-box">
<transition
- :duration="1000"
- mode="out-in"
- appear
- enter-active-class="animated fadeInRight"
- leave-active-class="animated fadeOut"
- appear-active-class="animated zoomInDown"
+ :name="transitionName"
>
<router-view></router-view>
</transition>
</div>
+ <foot></foot>
</div>
</template>
<script>
+ import foot from "@/components/foot.vue";
export default {
+ components: {
+ foot,
+ },
name: "App",
created() {
let title = this.$route.meta.title || "首页";
@@ -46,19 +46,26 @@
// this.$store.state.className = window.localStorage.getItem('styleName')?window.localStorage.getItem('styleName'):'red'
},
watch: {
- $route(val) {
- let title = val.meta.title || "首页";
+ $route(to, from) {
+ let title = to.meta.title || "首页";
this.title = title;
-
- if (val.meta.iconRight) {
- this.iconRight = val.meta.iconRight;
+ if (to.meta.iconRight) {
+ this.iconRight = to.meta.iconRight;
} else {
this.iconRight = "default";
}
- if (val.meta.hasHeader) {
+ if (to.meta.hasHeader) {
this.hasHeader = true;
} else {
this.hasHeader = false;
+ }
+ if (to.meta.index > from.meta.index) {
+ console.log("slide-left");
+ //设置动画名称
+ this.transitionName = "slide-left";
+ } else {
+ console.log("slide-right");
+ this.transitionName = "slide-right";
}
}
},
@@ -66,7 +73,8 @@
return {
title: "首页",
hasHeader: false,
- iconRight: "default"
+ iconRight: "default",
+ transitionName: ''
};
}
};
--
Gitblit v1.9.3