nutui/site_docs/docs/barrage/doc.md

Barrage 弹幕

介绍

用于话语和词组的轮播展示，适用于视频中或其他类似需求中。

安装

import { createApp } from 'vue';
//vue
import { Barrage } from '@nutui/nutui';
//taro
import { Barrage } from '@nutui/nutui-taro';

const app = createApp();
app.use(Barrage);

代码演示

基础用法1

Icon 的 name 属性支持传入图标名称或图片链接。

<nut-barrage ref="danmu" :danmu="list"></nut-barrage>

  setup() {
    const inputVal = ref<any>('');
    const danmu = ref<any>(null);
    let list = ref(["画美不看", "不明觉厉", "喜大普奔", "男默女泪", "累觉不爱", "爷青结"]); 
    function addDanmu() {
      let n = Math.random();
      danmu.value.add('随机——' + String(n).substr(2, 10));
    }
    return {
      inputVal,
      danmu,
      list,
      addDanmu
    };
  }

API

Props

参数	说明	类型	默认值
danmu	弹幕列表数据	Array	[]
frequency	可视区域内每个弹幕出现的时间间隔	Number	500
speeds	每个弹幕的滚动时间	Number	2000
rows	弹幕行数，分几行展示	Number	1
top	弹幕垂直距离	Number	10
loop	是否循环播放	Boolean	true

Events

事件名	说明	回调参数
add	添加数据	-