fix: barrage 修复

src/packages/__VUE/barrage/demo.vue

@@ -4,6 +4,9 @@
     <nut-cell>
       <nut-barrage ref="danmu" :danmu="list"></nut-barrage>
     </nut-cell>
+    <div class="test">
+      <nut-button @click="addDanmu" class="add nut-button--primary">{{ translate('btn1') }}</nut-button>
+    </div>
     <h2>{{ translate('slotTitle') }}</h2>
     <nut-cell>
       <nut-barrage>
@@ -13,9 +16,6 @@
         <span>ddd</span>
       </nut-barrage>
     </nut-cell>
-    <div class="test">
-      <button @click="addDanmu" class="add nut-button--primary">{{ translate('btn1') }}</button>
-    </div>
   </div>
 </template>
 

src/packages/__VUE/barrage/doc.en-US.md

@@ -81,8 +81,8 @@ export default {
 |--------------|---------------------------------- |-------|------------------|
 | danmu | Danmaku list data | Array | `[]` |
 | frequency | the time interval of each barrage in the visible area | number | `500` |
-| speeds | scrolling time of each barrage | number | `2000` |
-| rows | Number of bullet chatting lines, displayed in several lines | number | `1` |
+| speeds | scrolling time of each barrage | number | `5000` |
+| rows | Number of bullet chatting lines, displayed in several lines | number | `3` |
 | top | vertical distance of the barrage | number | `10` |
 | loop | Whether to play in a loop | boolean | `true` |
 
@@ -90,4 +90,4 @@ export default {
 
 | Event Name | Description | Callback Parameters |
 |--------|----------------|--------------|
-| add | add data | - |
+| add | add data(used via ref instance) | - |

src/packages/__VUE/barrage/doc.md

@@ -33,7 +33,7 @@ export default {
   props: {},
   setup() {
     const inputVal = ref('');
-    const danmu = ref(null);
+    const danmu = ref();
     let list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-']);
     function addDanmu() {
       let n = Math.random();
@@ -80,8 +80,8 @@ export default {
 |--------------|----------------------------------|--------|------------------|
 | danmu         | 弹幕列表数据               | Array | `[]`              |
 | frequency        | 可视区域内每个弹幕出现的时间间隔                         | number | `500`               |
-| speeds         | 每个弹幕的滚动时间 | number |  `2000`               |
-| rows  | 弹幕行数，分几行展示     | number | `1` |
+| speeds         | 每个弹幕的滚动时间 | number |  `5000`               |
+| rows  | 弹幕行数，分几行展示     | number | `3` |
 | top  | 弹幕垂直距离    | number | `10` |
 | loop  | 是否循环播放     | boolean | `true` |
 
@@ -89,4 +89,4 @@ export default {
 
 | 事件名 | 说明           | 回调参数     |
 |--------|----------------|--------------|
-| add  | 添加数据 | - |
+| add  | 添加数据(通过 ref 实例使用) | - |

src/packages/__VUE/barrage/doc.taro.md

@@ -71,4 +71,4 @@ export default {
 
 | 事件名 | 说明           | 回调参数     |
 |--------|----------------|--------------|
-| add  | 添加数据 | - |
+| add  | 添加数据(通过 ref 实例使用) | - |

src/packages/__VUE/barrage/index.taro.vue

@@ -28,11 +28,11 @@ export default create({
     },
     frequency: {
       type: Number,
-      default: 200
+      default: 500
     },
     speeds: {
       type: Number,
-      default: 2000
+      default: 5000
     },
     rows: {
       type: Number,
@@ -80,14 +80,6 @@ export default create({
       runStep();
     });
 
-    onUnmounted(() => {
-      danmuList.value = [];
-    });
-
-    onDeactivated(() => {
-      danmuList.value = [];
-    });
-
     watch(
       () => props.danmu,
       (newValue) => {

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, onDeactivated, ref, watch, nextTick, useSlots, onActivated } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('barrage');
 
@@ -40,8 +40,6 @@ export default create({
       default: true
     }
   },
-  emits: ['click'],
-
   setup(props, { slots }) {
     const classTime = new Date().getTime();
     const slotDefault = !!useSlots().default;
@@ -65,6 +63,15 @@ export default create({
     const danmuCWidth = ref(0);
 
     onMounted(() => {
+      init();
+    });
+
+    onUnmounted(() => {
+      danmuList.value = [];
+      clearTime();
+    });
+
+    const init = () => {
       danmuCWidth.value = dmBody.value.offsetWidth;
       if (slotDefault) {
         const list = document.getElementsByClassName('slotBody' + classTime);
@@ -82,19 +89,12 @@ export default create({
         dmBody.value?.style.setProperty('--move-distance', `-${danmuCWidth.value}px`);
         run();
       }, 300);
-    });
-
-    onUnmounted(() => {
-      danmuList.value = [];
-      clearInterval(timer);
-      timer = 0;
-    });
+    };
 
-    onDeactivated(() => {
-      danmuList.value = [];
-      clearInterval(timer);
+    const clearTime = () => {
+      clearTimeout(timer);
       timer = 0;
-    });
+    };
 
     watch(
       () => props.danmu,
@@ -115,8 +115,7 @@ export default create({
     };
 
     const run = () => {
-      clearInterval(timer);
-      timer = 0;
+      clearTime();
       timer = setTimeout(() => {
         play();
         run();
@@ -138,7 +137,6 @@ export default create({
         el.classList.add('nut-barrage__item');
         dmContainer.value.appendChild(el);
       }
-
       // let el = document.createElement(`div`);
       // el.innerHTML = danmuList.value[_index] as string;
       // el.classList.add('nut-barrage__item');
@@ -157,19 +155,14 @@ export default create({
         // el.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.addEventListener('animationend', () => {
+          if (slotDefault) {
+            el?.classList?.contains('move') && el.classList.remove('move');
+          } else {
             dmContainer.value.removeChild(el);
-          });
-          index.value++;
-        }
+          }
+        });
+        index.value++;
       });
     };
     return { classTime, classes, danmuList, dmBody, dmContainer, add };

src/sites/mobile-taro/vue/src/business/pages/barrage/index.vue

@@ -6,7 +6,7 @@
       <nut-barrage ref="danmu" :danmu="list"></nut-barrage>
     </nut-cell>
     <div class="test">
-      <button @click="addDanmu" class="add nut-button--primary">随机添加</button>
+      <nut-button @click="addDanmu" class="add nut-button--primary">随机添加</nut-button>
     </div>
   </div>
 </template>
@@ -43,4 +43,7 @@ export default {
   padding: 20px 0;
   height: 150px;
 }
+.nut-button {
+  width: 100%;
+}
 </style>