From 738964a76975dc3cb1f3206eb13a7612b92f1aed Mon Sep 17 00:00:00 2001
From: Soybean <honghuangdc@gmail.com>
Date: Thu, 25 Nov 2021 22:16:34 +0800
Subject: [PATCH] =?UTF-8?q?fix(projects):=20=E6=B7=BB=E5=8A=A0=E8=A5=BF?=
 =?UTF-8?q?=E7=93=9C=E8=A7=86=E9=A2=91=E5=AE=9E=E4=BE=8B=E5=9C=A8onUnMount?=
 =?UTF-8?q?ed=E7=9A=84=E9=94=80=E6=AF=81=EF=BC=8C=E5=A4=9A=E9=A1=B5?=
 =?UTF-8?q?=E7=AD=BE=E5=B1=85=E4=B8=AD=E8=B7=9D=E7=A6=BB=E7=B2=BE=E7=A1=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/GlobalTab/components/MultiTab/index.vue   |  6 +++---
 src/views/component/video/index.vue                  | 12 +++++++++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/layouts/common/GlobalTab/components/MultiTab/index.vue b/src/layouts/common/GlobalTab/components/MultiTab/index.vue
index 5b3e4146..3bcbb15e 100644
--- a/src/layouts/common/GlobalTab/components/MultiTab/index.vue
+++ b/src/layouts/common/GlobalTab/components/MultiTab/index.vue
@@ -71,13 +71,13 @@ function setDropdownConfig(x: number, y: number, currentPath: string) {
 
 // 获取当前激活的tab的clientX
 const tabRef = ref<HTMLElement | null>(null);
-async function getActiveChromeTabClientX() {
+async function getActiveTabClientX() {
   await nextTick();
   const index = app.activeMultiTabIndex;
   if (tabRef.value) {
     const activeTabElement = tabRef.value.children[index];
     const { x, width } = activeTabElement.getBoundingClientRect();
-    const clientX = x + width;
+    const clientX = x + width / 2;
     setTimeout(() => {
       emit('scroll', clientX);
     }, 50);
@@ -103,7 +103,7 @@ useEventListener(window, 'beforeunload', () => {
 watch(
   () => app.activeMultiTabIndex,
   () => {
-    getActiveChromeTabClientX();
+    getActiveTabClientX();
   },
   {
     immediate: true
diff --git a/src/views/component/video/index.vue b/src/views/component/video/index.vue
index 1dfac56e..5208de5b 100644
--- a/src/views/component/video/index.vue
+++ b/src/views/component/video/index.vue
@@ -7,24 +7,30 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import { NCard } from 'naive-ui';
 import Player from 'xgplayer';
 
 const domRef = ref<HTMLElement | null>(null);
+const player = ref<Player | null>(null);
 
 function renderXgPlayer() {
   const url = 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4';
-  const player = new Player({
+  player.value = new Player({
     el: domRef.value!,
     url,
     playbackRate: [0.5, 0.75, 1, 1.5, 2]
   });
-  return player;
+}
+function destroyXgPlayer() {
+  player.value?.destroy();
 }
 
 onMounted(() => {
   renderXgPlayer();
 });
+onUnmounted(() => {
+  destroyXgPlayer();
+});
 </script>
 <style scoped></style>