vue3-barrage

基于 Vue.js 3.x 的弹幕交互组件

安装

$ npm install vue3-barrage --save

案例

<template>
  <vue3-barrage ref="barrage" :lanesCount="6" :boxHeight="data.stageHeight" :isShow="data.barrageIsShow" :list="data.list" :loop="data.barrageLoop" :speed="data.speed" attachId="barrage" :fontSize="data.fontSize">
    <!-- 自定义弹幕样式 -->
    <template #barrage="list">
      <span style="color: #00099">{{ list.item.msg }}</span>
    </template>
  </vue3-barrage>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
type PositionStatus = 'normal' | 'top' | 'bottom';

interface BarrageList {
  msg: string | undefined;
  position: PositionStatus;
}

// 响应式数据
let data = reactive({
  barrageList: [] as Array<BarrageList>,
  msg: [
    '礼',
    '老子',
    '孔子云：',
    '何陋之有',
    '谈笑有鸿儒',
    '孔子云：何陋之有？',
    '山不在高，有仙则名',
    '予谓菊，花之隐逸者也',
    '无丝竹之乱耳，无案牍之劳形',
    'Hello! vue3-barrage 0.0.1',
    '崇祯五年十二月，余住西湖',
    '莫说相公痴，更有痴似相公者。',
    '先天下之忧而忧，后天下之乐而乐',
    '是进亦忧，退亦忧。然则何时而乐耶？',
    '居庙堂之高则忧其民，处江湖之远则忧其君。',
    '嗟夫！予尝求古仁人之心，或异二者之为，何哉？',
    '是日更定矣，余拏一小舟，拥毳衣炉火，独往湖心亭看雪',
    '惟长堤一痕、湖心亭一点、与余舟一芥、舟中人两三粒而已。',
    '醉翁之意不在酒，在乎山水之间也。山水之乐，得之心而寓之酒也。',
    '然而禽鸟知山林之乐，而不知人之乐；人知从太守游而乐，而不知太守之乐其乐也。',
  ],
  position: 'normal',
  fontSize: 12,
  stageHeight: 300,
  barrageIsShow: true,
  currentId: 0,
  barrageLoop: true,
  speed: 10
});
const addToList = () => {
  if (data.position === 'bottom') {
    const arr: Array<BarrageList> = Array.from({ length: 3 }, (e) => {
      return {
        id: ++data.currentId,
        msg: data.msg[Math.floor(Math.random() * 20)],
        position: 'bottom',
      };
    });
    data.barrageList.push(...arr);
  } else if (data.position === 'top') {
    const arr: Array<BarrageList> = Array.from({ length: 3 }, (e) => {
      return {
        id: ++data.currentId,
        msg: data.msg[Math.floor(Math.random() * 20)],
        position: 'top',
      };
    });
    data.barrageList.push(...arr);
  } else {
    const arr: Array<BarrageList> = Array.from({ length: 30 }, (e) => {
      return {
        id: ++data.currentId,
        msg: data.msg[Math.floor(Math.random() * 20)],
        position: 'top',
      };
    });
    data.barrageList.push(...arr);
  }
};

</script>

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | :---------- | :------------------------------------------------------- | :------- | :--------- | :----- | | attachId | 挂载的DOM元素id，不设置就正常显示 | string | | | | isShow | 是否展示弹幕 | Boolean | | true | | list | 弹幕列表 | Array | | [] | | lanesCount | 弹幕轨道数量 | Number | | 5 | | boxWidth | 元素宽度 | Number | 父元素宽度 | | | boxHeight | 元素高度 | Number | 父元素高度 | | | fontSize | 弹幕字体大小，单位px | Number | | 18 | | speed | 弹幕速度 | Number | 1-10 | 6 | | loop | 是否循环展示 | Boolean | | false | | defineLanes | 自定义弹幕显示轨道。注意必须返回一个[1-lanesCount]的数字 | Function | | |

list属性

| 参数 | 说明 | 类型 | | -------- | ------------------------------------------ | ----------------------- | | msg | 弹幕文本 | string | | position | 弹幕位置。滚动、顶部固定、底部固定 | normal | top | bottom | | 其他 | 自己定义的在插槽里自己使用，插槽使用见下面 | |

方法

| 方法 | 说明 | 参数 | | ------- | ------------------ | --------------- | | maxRows | 最大行数改变时触发 | (value: number) |

插槽配置

<template>
  <vue-barrage ref="barrage" :lanesCount="6" :boxHeight="data.stageHeight" :isShow="data.barrageIsShow" :list="data.list" :loop="data.barrageLoop" :speed="data.speed" attachId="barrage" :fontSize="data.fontSize">
    <!-- 自定义弹幕样式 -->
    <!-- #barrage为聚名插槽，必须为这个，下面item也必须为item，其他自定义 -->
    <!-- item里自己加的东西就自己发挥了 -->
    <template #barrage="xxx">
      <span style="color: #00099">{{ xxx.item.msg }}</span>
    </template>
  </vue-barrage>
</template>