fix: lyrics are misplaced after minimization

radishes-music · Nov 7, 2020 · 054aca1 · 054aca1
1 parent 900f565
commit 054aca1
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/src/components/teleport-layout/index.tsx b/src/components/teleport-layout/index.tsx
@@ -27,6 +27,7 @@ export const TeleportToAny = defineComponent({
     return () => (
       <Teleport to={props.container}>
         <div
+          v-show={props.visible}
           class={
             props.class ||
             classnames('cover-container', {

diff --git a/src/pages/footer/component/lyrice-flash/index.tsx b/src/pages/footer/component/lyrice-flash/index.tsx
@@ -38,8 +38,12 @@ export const LyriceFlash = defineComponent({
     })
 
     return () => (
-      <TeleportToAny container="body" class="lyrice-flash-contanier">
-        <div v-show={visible.value} class="lyrice-flash">
+      <TeleportToAny
+        container="body"
+        class="lyrice-flash-contanier"
+        visible={visible.value}
+      >
+        <div class="lyrice-flash">
           {lyrice.value.map((item, i) => (
             <div
               data-time={item.time}

diff --git a/src/pages/footer/component/lyrice/index.tsx b/src/pages/footer/component/lyrice/index.tsx
@@ -14,8 +14,14 @@ import {
 import { on, off } from '@/utils/index'
 import { uesModuleStore } from '@/hooks/index'
 import { TeleportToAny } from '@/components/teleport-layout/index'
+import {
+  NAMESPACED as LayoutNamespace,
+  State as LayoutState,
+  Size
+} from '@/layout/module'
 import { NAMESPACED, State, Getter } from '../../module'
 import classnams from 'classnames'
+import { debounce } from 'lodash'
 import './index.less'
 
 const prefix = 'song-details'
@@ -36,6 +42,9 @@ export const PlayLyrice = defineComponent({
     const offset = ref(0)
 
     const { useState, useGetter } = uesModuleStore<State, Getter>(NAMESPACED)
+    const LayoutModule = uesModuleStore<LayoutState>(LayoutNamespace)
+
+    const { screenSize } = toRefs(LayoutModule.useState())
 
     const lyrice = computed(() => useGetter('musicLyrics'))
     const { currentTime } = toRefs(useState())
@@ -60,6 +69,7 @@ export const PlayLyrice = defineComponent({
       nextTick(() => {
         offset.value = contanier.value.clientHeight / 2 - 50
         disabled.value = !visible.value
+        console.log(offset.value, disabled.value)
       })
     }
 
@@ -69,11 +79,11 @@ export const PlayLyrice = defineComponent({
       }
     })
 
-    const resize = () => {
-      if (visible.value) {
+    const resize = debounce(() => {
+      if (visible.value && screenSize.value !== Size.SM) {
         updateOffset()
       }
-    }
+    }, 100)
 
     onMounted(() => {
       on(window, 'resize', resize)