fix: fix the logo fixed style && filter change (#573)

varletjs · May 20, 2022 · 37908dc · 37908dc
1 parent 54d3eb7
commit 37908dc
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 20 deletions.
diff --git a/packages/varlet-cli/site/pc/components/AnimationBox.vue b/packages/varlet-cli/site/pc/components/AnimationBox.vue
@@ -15,7 +15,11 @@ export default defineComponent({
       mutationObserver.value = new MutationObserver(() => {
         animationElClientRect.value = varletLogoAnimationRef?.value?.getBoundingClientRect();
       });
-      mutationObserver.value.observe(document.body, { attributes: true, subtree: true, childList:true });
+      mutationObserver.value.observe(varletLogoAnimationRef.value?.parentNode?.parentNode || document.body, {
+        attributes: true, 
+        subtree: true, 
+        childList:true 
+      });
     })
 
     onBeforeUnmount(() => {

diff --git a/packages/varlet-cli/site/pc/components/LogoAnimation.vue b/packages/varlet-cli/site/pc/components/LogoAnimation.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import config from '@config'
 import { get } from 'lodash-es'
-import { computed, defineComponent, onBeforeMount, onMounted, onBeforeUnmount, ref, watch, nextTick } from 'vue'
+import { computed, defineComponent, onMounted, onBeforeUnmount, ref, watch, nextTick } from 'vue'
 import { animationBoxData, animationEl, animationElClientRect } from '../floating'
 import type { Ref, StyleValue } from 'vue'
 import { useRouter } from 'vue-router'
@@ -27,38 +27,34 @@ export default defineComponent({
     }))
 
     const router = useRouter()
-    router.beforeEach(async () => {
-      if (!floatingState.value) {
+    router.beforeEach(async (to: any, from: any) => {
+      if (!floatingState.value && from.path !== '/') {
         floatingState.value = true
       }
-      await nextTick();
-    })
-
-    onBeforeMount(() => {
-      floatingState.value = false
+      await nextTick()
     })
 
     onMounted(() => {
-      window.addEventListener('resize', resetPosition, false);
+      window.addEventListener('resize', resetPosition, false)
     })
 
     onBeforeUnmount(() => {
       resetTimer && clearTimeout(resetTimer)
-      window.removeEventListener('resize', resetPosition);
+      window.removeEventListener('resize', resetPosition)
     })
 
     const land = () => {
-      floatingState.value = false;
+      floatingState.value = false
     }
 
-    let resetTimer: number;
+    let resetTimer: number
 
     const resetPosition = async () => {
       if (floatingState.value) {
         floatingState.value = false
-        await nextTick();
+        await nextTick()
       }
-      clearTimeout(resetTimer);
+      clearTimeout(resetTimer)
       const newBRect = animationEl.value?.getBoundingClientRect()
       if (newBRect) {
         resetTimer = window.setTimeout(() => {
@@ -73,21 +69,34 @@ export default defineComponent({
       styles,
       animationEl,
       floatingState,
-      land
+      land,
     }
   },
 })
 </script>
 
 <template>
   <Teleport :to="animationEl" v-if="animationEl">
-    <img v-show="!floatingState" v-bind="animationBoxData.attrs" :style="styles" :src="logo" alt="logo"
-      v-if="logo && animationEl" class="varlet-cli-logo-animation" />
+    <img
+      v-show="!floatingState"
+      v-bind="animationBoxData.attrs"
+      :style="styles"
+      :src="logo"
+      alt="logo"
+      v-if="logo && animationEl"
+      class="varlet-cli-logo-animation"
+    />
   </Teleport>
   <div v-show="floatingState">
-    <img @transitionend="land" v-bind="animationBoxData.attrs" :style="styles" :src="logo" alt="logo"
+    <img
+      @transitionend="land"
+      v-bind="animationBoxData.attrs"
+      :style="styles"
+      :src="logo"
+      alt="logo"
       v-if="logo && animationEl"
-      class="varlet-cli-logo-animation varlet-cli-logo-position varlet-cli-logo-transition" />
+      class="varlet-cli-logo-animation varlet-cli-logo-position varlet-cli-logo-transition"
+    />
   </div>
 </template>