Barrage 弹幕

介绍

实现观看视频时弹出的评论性字幕功能。

引入

import { createApp } from 'vue';
import { Barrage } from '@szhn/dh-design-mobile';

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

代码演示

基础用法

通过 v-model 属性绑定弹幕数据。

<van-barrage v-model="list">
  <div class="video" />
</van-barrage>

const list = ref([
  { id: 1, text: '轻量' },
  { id: 2, text: '可定制的' },
  { id: 3, text: 'Mobile' },
  { id: 4, text: 'Vue' },
  { id: 5, text: '组件库' },
]);

模仿视频弹幕

通过 Barrage 实例的 play 和 pause 方法来控制弹幕播放状态，通过向 v-model 绑定的数组中添加数据来发送弹幕。

<van-barrage ref="barrageRef" v-model="list" :auto-play="false">
  <div class="video" />
</van-barrage>
<van-button type="primary" size="small" @click="onAdd">弹幕</van-button>
<van-button size="small" @click="onToggle">开始</van-button>

const list = ref([...defaultList]);
const barrageRef = ref();
const paused = ref(false);
let id = 100;

const onAdd = () => {
  list.value.push({ id: id++, text: '弹幕' });
};
const onToggle = () => {
  if (paused.value) {
    barrageRef.value?.play();
  } else {
    barrageRef.value?.pause();
  }
  paused.value = !paused.value;
};

API

Props

参数	说明	类型	默认值
v-model	弹幕数据	BarrageItem[]	-
auto-play	是否自动播放	boolean	true
rows	弹幕文字行数	number | string	4
top	弹幕文字区域顶部间距	number | string	10
duration	弹幕文字滑过容器的时间	number | string	4000
delay	弹幕动画延迟	number	300

方法

通过 ref 可以获取到 Barrage 实例并调用实例方法。

方法名	说明	参数	返回值
play	播放弹幕	-	-
pause	暂停弹幕	-	-

Slots

名称	说明
default	弹幕组件子元素

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
--van-barrage-font-size	16px	-
--van-barrage-space	10px	-
--van-barrage-color	var(--van-white)	-
--van-barrage-font	inherit	-