Barrage 弹幕

介绍

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

代码演示

基础用法

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

<z-barrage v-model="list">
  <view class="video"></view>
</z-barrage>
<view style="margin-top: 20rpx">
  <z-button @click="add" type="primary" size="small"> 弹幕 </z-button>
</view>
import { ref, watch } from 'vue'
const defaultList = [
  { id: 11, text: 'zebra-ui' },
  { id: 12, text: '666666' },
  { id: 13, text: '哈哈哈哈哈哈' },
  { id: 14, text: 'uniapp' },
  { id: 15, text: 'zebra-swiper' },
  { id: 16, text: '嘻嘻嘻' },
  {
    id: 17,
    text: '这条弹幕很长这条弹幕很长这条弹幕很长这条弹幕很长这条弹幕很长'
  }
]
const list = ref([...defaultList])
const add = () => {
  list.value.push({ id: Math.random(), text: 'Barrage' })
}

模拟视频弹幕

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

<z-barrage v-model="videoList" ref="videoBarrage" :auto-play="false">
  <view class="video"></view>
</z-barrage>
<view style="margin-top: 10px">
  <z-button
    @click="videoAdd"
    type="primary"
    size="small"
    :disabled="!isPlay"
  >
    弹幕
  </z-button>
  <z-button
    :custom-style="{ 'margin-left': '20rpx' }"
    @click="toggle()"
    size="small"
  >
    {{ isPlay ? '暂停' : '播放' }}
  </z-button>
</view>
const videoList = ref([...defaultList])
const videoBarrage = ref()
const videoAdd = () => {
  videoList.value.push({ id: Math.random(), text: 'Barrage' })
}

const isPlay = ref(false)

const toggle = (value = !isPlay.value) => {
  isPlay.value = value
}

watch(isPlay, () => {
  if (isPlay.value) videoBarrage.value?.play()
  else videoBarrage.value?.pause()
})
.demo-barrage {
  .video {
    width: 100%;
    height: 300rpx;
    background-color: var(--z-gray-2);
  }
}

API

Props

参数说明类型默认值
v-model弹幕数据BarrageItem-
auto-play是否自动播放弹幕booleantrue
rows弹幕文字行数number | string4
top弹幕文字区域顶部间距,单位 pxnumber | string10
duration弹幕文字滑过容器的时间,单位 msnumber | string4000
delay弹幕动画延时,单位 msnumber300

方法

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

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

Slots

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

主题定制

样式变量

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

名称默认值描述
--z-barrage-font-size32rpx-
--z-barrage-space20rpx-
--z-barrage-colorvar(--z-white)-
--z-barrage-fontinherit-