Merge branch 'next' of https://github.com/jdf2e/nutui into next

src/packages/__VUE/barrage/demo.vue

@@ -5,8 +5,7 @@
       <nut-barrage ref="danmu" :danmu="list"></nut-barrage>
     </nut-cell>
     <div class="test">
-      <nut-input label="文本" v-model="inputVal" />
-      <nut-button type="primary" shape @click="addDanmu">添加</nut-button>
+      <button @click="addDanmu" class="add">随机添加</button>
     </div>
   </div>
 </template>
@@ -29,7 +28,8 @@ export default createDemo({
       '爷青结'
     ]);
     function addDanmu() {
-      danmu.value.add(inputVal.value);
+      let n = Math.random();
+      danmu.value.add('随机——' + String(n).substr(2, 10));
     }
     return {
       inputVal,
@@ -45,13 +45,20 @@ export default createDemo({
 .nut-cell,
 .nut-barrage {
   padding: 20px 0;
-  height: 120px;
+  height: 150px;
+}
+#app .demo {
+  background: #fff;
 }
 .test {
-  .nut-input {
-    width: 80%;
+  .add {
+    display: block;
+    padding: 5px 30px;
+    margin: 20px auto;
+    border-radius: 15px;
+    background: #949494;
+    color: white;
+    font-size: 12px;
   }
-  display: flex;
-  justify-content: space-between;
 }
 </style>

src/packages/__VUE/barrage/doc.md

@@ -33,7 +33,8 @@ app.use(Barrage);
     const danmu = ref<any>(null);
     let list = ref(["画美不看", "不明觉厉", "喜大普奔", "男默女泪", "累觉不爱", "爷青结"]); 
     function addDanmu() {
-      danmu.value.add(inputVal.value);
+      let n = Math.random();
+      danmu.value.add('随机——' + String(n).substr(2, 10));
     }
     return {
       inputVal,
@@ -53,7 +54,7 @@ app.use(Barrage);
 | 参数         | 说明                             | 类型   | 默认值           |
 |--------------|----------------------------------|--------|------------------|
 | danmu         | 弹幕列表数据               | Array | []              |
-| frequency        | 可视区域内每个弹幕出现的时间间隔                         | Number | 200               |
+| frequency        | 可视区域内每个弹幕出现的时间间隔                         | Number | 500               |
 | speeds         | 每个弹幕的滚动时间 | Number |  2000               |
 | rows  | 弹幕行数，分几行展示     | Number | 1 |
 | top  | 弹幕垂直距离    | Number | 10 |

src/packages/__VUE/barrage/index.scss

@@ -5,21 +5,21 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
+  background-color: #f7f8fa;
   .dmitem {
     display: block;
     position: absolute;
     right: 0;
-    padding: 5px 25px;
+    padding: 3px 25px;
     border-radius: 50px;
     font-size: 12px;
     text-align: center;
-    color: #fff;
     white-space: pre;
     transform: translateX(100%);
     background: linear-gradient(
       to right,
-      rgba(26, 25, 25, 0.15),
-      rgba(0, 0, 0, 0.2)
+      rgba(0, 0, 0, 0.15),
+      rgba(0, 0, 0, 0)
     );
     &.move {
       will-change: transform;

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

@@ -126,7 +126,8 @@ export default create({
             let height = domList[_index]['height'];
             el.classList.add('move');
             el.style.animationDuration = `${speeds}ms`;
-            el.style.top = (_index % rows.value) * (height + top.value) + 'px';
+            el.style.top =
+              (_index % rows.value) * (height + top.value) + 20 + 'px';
             // el.style.width = width + 20 + 'px';
             el.style.width = 'auto';
             // el.style.left = "-"+(_index % rows.value) + 'px';

src/packages/__VUE/barrage/index.vue

@@ -29,7 +29,7 @@ export default create({
     },
     frequency: {
       type: Number,
-      default: 200
+      default: 500
     },
     speeds: {
       type: Number,
@@ -119,7 +119,7 @@ export default create({
         const height = el.offsetHeight;
         el.classList.add('move');
         el.style.animationDuration = `${speeds}ms`;
-        el.style.top = (_index % rows.value) * (height + top.value) + 'px';
+        el.style.top = (_index % rows.value) * (height + top.value) + 20 + 'px';
         el.style.width = width + 20 + 'px';
         // el.style.left = "-"+(_index % rows.value) + 'px';
         el.style.setProperty('--move-distance', `-${danmuCWidth.value}px`);