引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from 'vue';
import { Barrage } from 'vant';

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

基础用法

可以通过 v-model 双向绑定弹幕数据，Barrage 会在组件区域内播放文字弹幕，使用数组数据 push() 可以发送弹幕文字。

<van-barrage v-model="list">
  <div class="video" style="width: 100%; height: 150px"></div>
</van-barrage>
<van-space style="margin-top: 10px">
  <van-button @click="add" type="primary" size="small"> 弹幕 </van-button>
</van-space>

export default {
  setup() {
    const defaultList = [
      { id: 100, text: '轻量' },
      { id: 101, text: '可定制的' },
      { id: 102, text: '移动端' },
      { id: 103, text: 'Vue' },
      { id: 104, text: '组件库' },
      { id: 105, text: 'VantUI' },
      { id: 106, text: '666' },
    ];

    const list = ref([...defaultList]);
    const add = () => {
      list.value.push({ id: Math.random(), text: 'Barrage' });
    };

    return { list, add };
  },
};

模拟视频弹幕

设置 auto-play 为 false 属性后，需要使用 play() 进行弹幕播放，暂停可以使用 pause() 实现。

<van-barrage v-model="list" ref="barrage" :auto-play="false">
  <div class="video" style="width: 100%; height: 150px"></div>
</van-barrage>
<van-space style="margin-top: 10px">
  <van-button @click="add" type="primary" size="small" :disabled="!isPlay">
    弹幕
  </van-button>
  <van-button @click="toggle()" size="small">
    {{ isPlay ? '暂停' : '开始' }}
  </van-button>
</van-space>

export default {
  setup() {
    const defaultList = [
      { id: 100, text: '轻量' },
      { id: 101, text: '可定制的' },
      { id: 102, text: '移动端' },
      { id: 103, text: 'Vue' },
      { id: 104, text: '组件库' },
      { id: 105, text: 'VantUI' },
      { id: 106, text: '666' },
    ];

    const list = ref([...defaultList]);
    const barrage = ref<BarrageInstance>();
    const add = () => {
      list.value.push({ id: Math.random(), text: 'Barrage' });
    };

    const [isPlay, toggle] = useToggle(false);

    watch(isPlay, () => {
      if (isPlay.value) barrage.value?.play();
      else barrage.value?.pause();
    });

    return { list, barrage, isPlay, toggle, add };
  },
};

Props

方法

通过 ref 可以获取到 Barrage 实例并调用实例方法，详见组件实例方法。

Slots

类型定义

组件导出以下类型定义：

import type { BarrageProps, BarrageItem, BarrageInstance } from 'vant';

样式变量

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