chore(barrage): split demo (#2873)

packages/nutui-taro-demo/src/business/pages/barrage/basic.vue

@@ -0,0 +1,17 @@
+<template>
+  <div style="position: relative; height: 150px">
+    <nut-barrage ref="barrageRef" :danmu="list"></nut-barrage>
+  </div>
+  <div class="test">
+    <nut-button @click="add">随机添加</nut-button>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+const barrageRef = ref();
+const list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-']);
+const add = () => {
+  const n = Math.random();
+  barrageRef.value.add('随机——' + String(n).substr(2, 10));
+};
+</script>

packages/nutui-taro-demo/src/business/pages/barrage/index.vue

@@ -1,34 +1,20 @@
 <template>
-  <Demo class="barrage-demo">
-    <h2>基础用法</h2>
-    <nut-cell class="danmu-box">
-      <nut-barrage ref="danmu" :danmu="list"></nut-barrage>
-    </nut-cell>
-    <div class="test">
-      <nut-button class="add nut-button--primary" @click="addDanmu">随机添加</nut-button>
-    </div>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-const danmu = ref<any>(null);
-let list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结']);
-function addDanmu() {
-  let n = Math.random();
-  danmu.value.add('随机——' + String(n).substr(2, 10));
-}
-</script>
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
 
-<style lang="scss">
-.barrage-demo {
-  .danmu-box,
-  .nut-barrage {
-    padding: 20px 0;
-    height: 150px;
-  }
-  .nut-button {
-    width: 100%;
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法'
+  },
+  'en-US': {
+    basic: 'Basic Usage'
   }
-}
-</style>
+});
+</script>

src/packages/__VUE/barrage/demo/basic.vue

@@ -0,0 +1,17 @@
+<template>
+  <div style="position: relative; height: 150px">
+    <nut-barrage ref="barrageRef" :danmu="list"></nut-barrage>
+  </div>
+  <div class="test">
+    <nut-button @click="add">随机添加</nut-button>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+const barrageRef = ref();
+const list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-']);
+const add = () => {
+  const n = Math.random();
+  barrageRef.value.add('随机——' + String(n).substr(2, 10));
+};
+</script>

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

@@ -0,0 +1,20 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法'
+  },
+  'en-US': {
+    basic: 'Basic Usage'
+  }
+});
+</script>

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

@@ -16,47 +16,7 @@ app.use(Barrage);
 
 ### Basic usage
 
-`Icon's' name 'attribute supports the incoming icon name or picture link.
-:::demo
-
-```vue
-<template>
-  <nut-barrage ref="danmu" :danmu="list"></nut-barrage>
-  <div class="test">
-    <button @click="addDanmu" class="add nut-button--primary">add randomly</button>
-  </div>
-</template>
-<script setup>
-import { ref } from 'vue';
-const danmu = ref();
-let list = ref(['aaaa', 'bbbb', 'cccc', 'dddd', 'eeee', 'ffff']);
-function addDanmu() {
-  let n = Math.random();
-  danmu.value.add('randomly——' + String(n).substr(2, 10));
-}
-</script>
-```
-
-:::
-
-### slot usage
-
-> Using the slot requires putting the scrolling content inside the html tag, the applet environment is not currently supported
-
-:::demo
-
-```vue
-<template>
-  <nut-barrage>
-    <span>aaa</span>
-    <span>bbb</span>
-    <span>ccc</span>
-    <span>ddd</span>
-  </nut-barrage>
-</template>
-```
-
-:::
+> demo: barrage basic
 
 ## API
 

src/packages/__VUE/barrage/doc.md

@@ -16,46 +16,7 @@ app.use(Barrage);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-barrage ref="danmu" :danmu="list"></nut-barrage>
-  <div class="test">
-    <button @click="addDanmu" class="add nut-button--primary">随机添加</button>
-  </div>
-</template>
-<script setup>
-import { ref } from 'vue';
-const danmu = ref();
-let list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-']);
-function addDanmu() {
-  let n = Math.random();
-  danmu.value.add('随机——' + String(n).substr(2, 10));
-}
-</script>
-```
-
-:::
-
-### slot 用法
-
-> 使用插槽需要将滚动内容放在 html 标签内，小程序环境暂不支持
-
-:::demo
-
-```vue
-<template>
-  <nut-barrage>
-    <span>aaa</span>
-    <span>bbb</span>
-    <span>ccc</span>
-    <span>ddd</span>
-  </nut-barrage>
-</template>
-```
-
-:::
+> demo: barrage basic
 
 ## API
 

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

@@ -16,27 +16,7 @@ app.use(Barrage);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-barrage ref="danmu" :danmu="list"></nut-barrage>
-  <div class="test">
-    <button @click="addDanmu" class="add nut-button--primary">随机添加</button>
-  </div>
-</template>
-<script setup>
-import { ref } from 'vue';
-const danmu = ref();
-let list = ref(['画美不看', '不明觉厉', '喜大普奔', '男默女泪', '累觉不爱', '爷青结-']);
-function addDanmu() {
-  let n = Math.random();
-  danmu.value.add('随机——' + String(n).substr(2, 10));
-}
-</script>
-```
-
-:::
+> demo: barrage basic business
 
 ## API