fix(barrage): slot 模式优化 (#2066)

src/packages/__VUE/barrage/index.vue

@@ -8,7 +8,7 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, onMounted, onUnmounted, onDeactivated, ref, watch, nextTick, useSlots } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch, nextTick, useSlots } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('barrage');
 
@@ -40,9 +40,7 @@ export default create({
       default: true
     }
   },
-  emits: ['click'],
-
-  setup(props, { slots }) {
+  setup(props) {
     const classTime = new Date().getTime();
     const slotDefault = !!useSlots().default;
 
@@ -65,36 +63,60 @@ export default create({
     const danmuCWidth = ref(0);
 
     onMounted(() => {
+      init();
+      if (slotDefault) {
+        document.addEventListener('visibilitychange', function () {
+          if (document.visibilityState === 'hidden') {
+            clearTime();
+            index.value = 0;
+            eleSlot('hidden');
+          } else if (document.visibilityState === 'visible') {
+            init();
+          }
+        });
+      }
+    });
+
+    onUnmounted(() => {
+      danmuList.value = [];
+      clearTime();
+    });
+
+    const init = () => {
       danmuCWidth.value = dmBody.value.offsetWidth;
       if (slotDefault) {
-        const list = document.getElementsByClassName('slotBody' + classTime);
-        let childrens = list?.[0]?.children || [];
-        const dmList: any[] = [];
-        if (childrens) {
-          Array.from(childrens).forEach((item: any) => {
-            item.style.opacity = '0';
-            dmList.push(item);
-          });
-        }
-        danmuList.value = dmList;
+        eleSlot('init');
       }
       setTimeout(() => {
         dmBody.value?.style.setProperty('--move-distance', `-${danmuCWidth.value}px`);
         run();
       }, 300);
-    });
+    };
 
-    onUnmounted(() => {
-      danmuList.value = [];
-      clearInterval(timer);
-      timer = 0;
-    });
+    const eleSlot = (flag?: string) => {
+      const list = document.getElementsByClassName('slotBody' + classTime);
+      let childrens = list?.[0]?.children || [];
+      const dmList: any[] = [];
+      if (childrens) {
+        Array.from(childrens).forEach((item: any) => {
+          if (flag == 'init') {
+            item.style.opacity = '0';
+            dmList.push(item);
+          } else {
+            item.classList = '';
+            item.style = {};
+          }
+        });
+      }
+      if (flag == 'init') {
+        danmuList.value = dmList;
+      }
+    };
 
-    onDeactivated(() => {
-      danmuList.value = [];
-      clearInterval(timer);
+    const clearTime = () => {
+      clearTimeout(timer);
       timer = 0;
-    });
+    };
 
     watch(
       () => props.danmu,
@@ -115,20 +137,18 @@ export default create({
     };
 
     const run = () => {
-      clearInterval(timer);
-      timer = 0;
+      clearTime();
       timer = setTimeout(() => {
         play();
-        run();
       }, props.frequency);
     };
-    // const distance = ref('0');
     const play = () => {
       if (!props.loop && index.value >= danmuList.value.length) {
         return;
       }
       const _index = props.loop ? index.value % danmuList.value.length : index.value;
       let el = document.createElement(`view`);
+
       if (slotDefault && typeof danmuList.value[_index] == 'object') {
         el = danmuList.value[_index];
         el?.classList?.add('dmitem');
@@ -137,10 +157,9 @@ export default create({
         el.classList.add('dmitem');
         dmContainer.value.appendChild(el);
       }
-
       // let el = document.createElement(`div`);
       // el.innerHTML = danmuList.value[_index] as string;
-      // el.classList.add('dmitem');
+      // el.classList.add('nut-barrage__item');
       // dmContainer.value.appendChild(el);
       nextTick(() => {
         const height = el.offsetHeight;
@@ -152,25 +171,26 @@ export default create({
           const width = el.offsetWidth;
           el.style.width = width + 20 + 'px';
         }
-
-        // el.style.left = "-"+(_index % rows.value) + 'px';
+        // el.style.left = '-' + (_index % rows.value) + 'px';
         // el.style.setProperty('--move-distance', `-${danmuCWidth.value}px`);
-        // document.documentElement.style.setProperty('--move-distance', `-${danmuCWidth.value}px`);
         // distance.value = '-' + (speeds / 1000) * 150 + '%';
-        el.dataset.index = `${_index}`;
-        if (slotDefault) {
-          index.value++;
-          el.addEventListener('animationend', () => {
-            if (el?.classList?.contains('move')) {
-              el.classList.remove('move');
-            }
-          });
-        } else {
-          el.addEventListener('animationend', () => {
+        // el.dataset.index = `${_index}`;
+
+        el.addEventListener('animationend', () => {
+          if (slotDefault) {
+            el.classList.remove('move');
+          } else {
             dmContainer.value.removeChild(el);
-          });
-          index.value++;
+          }
+        });
+        index.value++;
+        if (index.value >= danmuList.value.length) {
+          index.value = 0;
         }
+        el.removeEventListener('animationend', () => {
+          // 回调
+        });
+        run();
       });
     };
     return { classTime, classes, danmuList, dmBody, dmContainer, add };