t-barrage

Barrage 弹幕

组件介绍

t-barrage 是一个基于 Canvas 绘制的弹幕组件，采用高性能 Canvas 绘制技术，减少 DOM 渲染，在页面中实现流畅的滚动文字效果。组件支持自定义弹幕的样式、速度和内容，适用于直播、互动活动等场景，提升用户体验和互动性。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

基础用法参考 demo/barrage/barrage.uvue，通过 ref 获取组件实例，调用 createDanmu 方法创建弹幕。

<template>
  <t-row class="bg-#000 twh-1000-400 r-20 overflow-hidden">
    <t-barrage ref="barrageRef" class="twh-100%" :trackHeight="40"></t-barrage>
  </t-row>
  
  <t-row class="mt-30">
    <t-input v-model="danmuText" placeholder="输入弹幕内容" class="mr-20"></t-input>
    <t-button @click="sendDanmu">发送弹幕</t-button>
  </t-row>
</template>

<script setup>
const barrageRef = ref<any>(null);
const danmuText = ref('');

function sendDanmu() {
  if (danmuText.value) {
    // 创建弹幕，参数：文本内容，字体大小，速度
    barrageRef.value?.createDanmu(danmuText.value, 16, 2);
    danmuText.value = '';
  }
}

// 自动发送测试弹幕
setInterval(() => {
  const texts = ['欢迎来到直播间！', '主播好厉害！', '666', '这个产品真不错', '支持主播'];
  const randomText = texts[Math.floor(Math.random() * texts.length)];
  barrageRef.value?.createDanmu(randomText, 16, 2);
}, 2000);
</script>

Props

属性名	说明	类型	默认值
trackHeight	弹幕轨道的高度	number	30

Methods

方法名	说明	参数
createDanmu	创建弹幕	text: string (弹幕内容), fontSize: number (字体大小), speed: number (弹幕速度)