| | |
| | | <template> |
| | | <section class="app-main"> |
| | | <router-view v-slot="{ Component, route }"> |
| | | <transition :enter-active-class="animante" mode="out-in"> |
| | | <keep-alive :include="tagsViewStore.cachedViews"> |
| | | <transition v-if="!route.meta.noCache" :enter-active-class="animante" mode="out-in"> |
| | | <keep-alive v-if="!route.meta.noCache" :include="tagsViewStore.cachedViews"> |
| | | <component :is="Component" v-if="!route.meta.link" :key="route.path" /> |
| | | </keep-alive> |
| | | </transition> |
| | | <transition v-if="route.meta.noCache" :enter-active-class="animante" mode="out-in"> |
| | | <component :is="Component" v-if="!route.meta.link && route.meta.noCache" :key="route.path" /> |
| | | </transition> |
| | | </router-view> |
| | | <iframe-toggle /> |
| | |
| | | |
| | | import IframeToggle from './IframeToggle/index.vue'; |
| | | const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
| | | const route = useRoute(); |
| | | const tagsViewStore = useTagsViewStore(); |
| | | |
| | | // 随机动画集合 |
| | | const animante = ref<string>(''); |
| | | const animationEnable = ref(useSettingsStore().animationEnable); |
| | | watch( |
| | | () => tagsViewStore.cachedViews, |
| | | (val) => { |
| | | console.log(val); |
| | | }, |
| | | { deep: true } |
| | | ); |
| | | watch( |
| | | () => useSettingsStore().animationEnable, |
| | | (val: boolean) => { |
| | |
| | | }, |
| | | { immediate: true } |
| | | ); |
| | | |
| | | onMounted(() => { |
| | | addIframe() |
| | | }) |
| | | |
| | | watchEffect((route) => { |
| | | addIframe() |
| | | }) |
| | | |
| | | function addIframe() { |
| | | if (route.meta.link) { |
| | | useTagsViewStore().addIframeView(route) |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |