Barrage Barrage

introduce

Implement the pop-up comment subtitle function when watching videos.

Code Demo

Basic usage

Barrage data can be bidirectionally bound through v-model. Barrage will play text barrages in the component area, and array data push() can be used to send barrage text.

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

Simulate video barrage

After setting auto-play to the false attribute, you need to use play() to play the barrage, and pause using 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"
   >
     Barrage
   </z-button>
   <z-button
     :custom-style="{ 'margin-left': '20rpx' }"
     @click="toggle()"
     size="small"
   >
     {{ isPlay ? 'pause' : 'play' }}
   </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

ParametersDescriptionTypeDefault value
v-modelBarrage dataBarrageItem-
auto-playWhether to automatically play barragesbooleantrue
rowsNumber of lines of barrage textnumber | string4
topSpacing at the top of the barrage text area, unit pxnumber | string10
durationThe time for the barrage text to slide across the container, unit msnumber | string4000
delaybarrage animation delay, unit msnumber300

method

Barrage instances can be obtained through ref and instance methods can be called.

Method nameDescriptionParametersReturn value
playplay barrage--
pausePause barrage--

Slots

NameDescription
defaultsub-element of barrage component

Theme customization

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.

NameDefaultDescription
--z-barrage-font-size32rpx-
--z-barrage-space20rpx-
--z-barrage-colorvar(--z-white)-
--z-barrage-fontinherit-