fix: docs,demo,组件bug

src/packages/__VUE/barrage/demo.vue

@@ -2,7 +2,7 @@
   <div class="demo">
     <h2>{{ translate('basic') }}</h2>
     <nut-cell>
-      <!-- <nut-barrage ref="danmu" :danmu="list"></nut-barrage> -->
+      <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>

src/packages/__VUE/barrage/index.vue

@@ -8,7 +8,7 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, onMounted, onUnmounted, onDeactivated, ref, watch, nextTick, useSlots, onActivated } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch, nextTick, useSlots } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { componentName, create } = createComponent('barrage');
 
@@ -40,7 +40,7 @@ export default create({
       default: true
     }
   },
-  setup(props, { slots }) {
+  setup(props) {
     const classTime = new Date().getTime();
     const slotDefault = !!useSlots().default;
 
@@ -64,6 +64,17 @@ export default create({
 
     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(() => {
@@ -74,16 +85,7 @@ export default create({
     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`);
@@ -91,6 +93,26 @@ export default create({
       }, 300);
     };
 
+    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;
+      }
+    };
+
     const clearTime = () => {
       clearTimeout(timer);
       timer = 0;
@@ -118,10 +140,8 @@ export default create({
       clearTime();
       timer = setTimeout(() => {
         play();
-        run();
       }, props.frequency);
     };
-    // const distance = ref('0');
     const play = () => {
       if (!props.loop && index.value >= danmuList.value.length) {
         return;
@@ -151,18 +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`);
         // distance.value = '-' + (speeds / 1000) * 150 + '%';
-        el.dataset.index = `${_index}`;
+        // el.dataset.index = `${_index}`;
+
         el.addEventListener('animationend', () => {
           if (slotDefault) {
-            el?.classList?.contains('move') && el.classList.remove('move');
+            el.classList.remove('move');
           } else {
             dmContainer.value.removeChild(el);
           }
         });
         index.value++;
+        if (index.value >= danmuList.value.length) {
+          index.value = 0;
+        }
+        el.removeEventListener('animationend', () => {
+          // 回调
+        });
+        run();
       });
     };
     return { classTime, classes, danmuList, dmBody, dmContainer, add };

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

@@ -26,9 +26,9 @@ Control the expanded panel list through 'V-model', and 'activenames' is in array
 
 ```html
 <template>
-<nut-collapse v-model:active="activeNames">
+<nut-collapse v-model="activeNames">
   <nut-collapse-item :name="1">
-    <template v-slot:mTitle>
+    <template v-slot:title>
       {{title1}}
     </template>
     Nutui is a lightweight Vue component library with JD style
@@ -56,7 +56,7 @@ export default {
     };
   }
 }
-
+</script>
 ```
 :::
 ### accordion
@@ -66,7 +66,7 @@ You can set accordion mode through 'accordion', and expand up to one panel. At t
 :::demo
 ```html
 <template>
-  <nut-collapse v-model:active="activeName" :accordion="true">
+  <nut-collapse v-model="activeName" :accordion="true">
     <nut-collapse-item :title="title1" :name="1" :value="subTitle">
       Build scenes based on JD design language system
     </nut-collapse-item>
@@ -96,7 +96,7 @@ export default {
     };
   }
 }
-</script>
+</>
 ```
 
 :::
@@ -109,11 +109,11 @@ Set custom icons through icon and rotate to set the rotation angle of icons
 ```html
 <template>
   <nut-collapse
-    v-model:active="activeName"
+    v-model="activeName"
     :accordion="true"
   >
     <nut-collapse-item :title="title1" :name="1" :icon="Notice">
-      <template v-slot:sTitle>
+      <template v-slot:value>
         text test
       </template>
       NUTUI3. 0 rethink its internal consistency and composability
@@ -153,7 +153,7 @@ Set content through slot: extrarender
 
 ```html
 <template>
-  <nut-collapse v-model:active="activeName" :accordion="true">
+  <nut-collapse v-model="activeName" :accordion="true">
     <nut-collapse-item :title="title1" :name="1">
       <template v-slot:extraRender>fixed content</template>
       Nutui is a lightweight Vue component library with JD style

src/packages/__VUE/collapse/doc.md

@@ -23,9 +23,9 @@ app.use(CollapseItem);
 
 ```html
 <template>
-<nut-collapse v-model:active="activeNames">
+<nut-collapse v-model="activeNames">
   <nut-collapse-item :name="1">
-    <template v-slot:mTitle>
+    <template v-slot:title>
       {{title1}}
     </template>
     NutUI是一套拥有京东风格的轻量级的 Vue 组件库
@@ -53,7 +53,7 @@ export default {
     };
   }
 }
-
+</script>
 ```
 :::
 
@@ -65,7 +65,7 @@ export default {
 
 ```html
 <template>
-  <nut-collapse v-model:active="activeName" :accordion="true">
+  <nut-collapse v-model="activeName" :accordion="true">
     <nut-collapse-item :title="title1" :name="1" :value="subTitle">
       基于京东设计语言体系，构建场景
     </nut-collapse-item>
@@ -108,11 +108,11 @@ export default {
 ```html
 <template>
   <nut-collapse
-    v-model:active="activeName"
+    v-model="activeName"
     :accordion="true"
   >
     <nut-collapse-item :title="title1" :name="1" :icon="Notice">
-      <template v-slot:sTitle>
+      <template v-slot:value>
         文本测试
       </template>
       NUTUI3.0重新思考其内在的一致性和可组合性
@@ -151,7 +151,7 @@ export default {
 
 ```html
 <template>
-  <nut-collapse v-model:active="activeName" :accordion="true">
+  <nut-collapse v-model="activeName" :accordion="true">
     <nut-collapse-item :title="title1" :name="1">
       <template v-slot:extraRender>固定内容</template>
       NutUI是一套拥有京东风格的轻量级的 Vue 组件库

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

@@ -23,9 +23,9 @@ app.use(CollapseItem);
 
 ```html
 <template>
-<nut-collapse v-model:active="activeNames">
+<nut-collapse v-model="activeNames">
   <nut-collapse-item :name="1">
-    <template v-slot:mTitle>
+    <template v-slot:title>
       {{title1}}
     </template>
     NutUI是一套拥有京东风格的轻量级的 Vue 组件库
@@ -53,7 +53,7 @@ export default {
     };
   }
 }
-
+</script>
 ```
 :::
 
@@ -65,7 +65,7 @@ export default {
 
 ```html
 <template>
-  <nut-collapse v-model:active="activeName" :accordion="true">
+  <nut-collapse v-model="activeName" :accordion="true">
     <nut-collapse-item :title="title1" :name="1" :value="subTitle">
       基于京东设计语言体系，构建场景
     </nut-collapse-item>
@@ -108,11 +108,11 @@ export default {
 ```html
 <template>
   <nut-collapse
-    v-model:active="activeName"
+    v-model="activeName"
     :accordion="true"
   >
     <nut-collapse-item :title="title1" :name="1" :icon="Notice">
-      <template v-slot:sTitle>
+      <template v-slot:value>
         文本测试
       </template>
       NUTUI3.0重新思考其内在的一致性和可组合性
@@ -151,7 +151,7 @@ export default {
 
 ```html
 <template>
-  <nut-collapse v-model:active="activeName" :accordion="true">
+  <nut-collapse v-model="activeName" :accordion="true">
     <nut-collapse-item :title="title1" :name="1">
       <template v-slot:extraRender>固定内容</template>
       NutUI是一套拥有京东风格的轻量级的 Vue 组件库

src/packages/__VUE/countup/index.scss

@@ -34,6 +34,7 @@
     display: block;
   }
   .nut-countup__machine {
+    display: block;
     overflow: hidden;
     .nut-countup__machine-item {
       float: left;

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

@@ -158,7 +158,7 @@ export default {
 |------------|-------------------------------------------------|---------|----------|
 | loading    | Whether to display skeleton screen                                    | boolean | `true`    | 
 | width       | Width per row                                        | string  | `default` |
-| height      | Height of each row                                        | string  | `100px`   |
+| height      | Height of each row                                        | string  | `15px`   |
 | animated    | Whether to turn on skeleton screen animation            | boolean  | `false`  |
 | avatar      | Show avatar                      | boolean | `false`   |
 | avatar-shape      | Avatar shape: square / round                       | string | `round`   |

src/packages/__VUE/skeleton/doc.md

@@ -158,7 +158,7 @@ export default {
 |------------|-------------------------------------------------|---------|----------|
 | loading    | 是否显示骨架屏                                    | boolean | `true`    | 
 | width       | 每行宽度                                        | string  | `default` |
-| height      | 每行高度                                        | string  | `100px`   |
+| height      | 每行高度                                        | string  | `15px`   |
 | animated    | 是否开启骨架屏动画                                | boolean  | `false`  |
 | avatar      | 是否显示头像                                     | boolean | `false`   |
 | avatar-shape      | 头像形状：正方形/圆形                        | string | `round`   |

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

@@ -161,7 +161,7 @@ export default {
 |------------|-------------------------------------------------|---------|----------|
 | loading    | 是否显示骨架屏                                    | boolean | `true`    | 
 | width       | 每行宽度                                        | string  | `default` |
-| height      | 每行高度                                        | string  | `100px`   |
+| height      | 每行高度                                        | string  | `15px`   |
 | animated    | 是否开启骨架屏动画                                | boolean  | `false`  |
 | avatar      | 是否显示头像                                     | boolean | `false`   |
 | avatar-shape      | 头像形状：正方形/圆形                        | string | `round`   |