Barrage - Vant 4

Barrage

🎬 Ready to bring your videos to life with flying comments? Let's explore the Barrage component!

Intro 📖

Create an immersive video experience with scrolling comments that flow across the screen! 💬✨ Perfect for live streams, video platforms, or any interactive content where user engagement takes center stage! 🚀

⚠️ Note: Please upgrade vant to >= v4.4.0 before using this awesome component!

Install 📦

Let's get the party started! Register the component globally via app.use - it's that simple! 🎯 Check out our Component Registration guide for more installation options.

import { createApp } from'vue'; import { Barrage } from'vant'; const app = createApp(); app.use(Barrage);

Usage 🎮

Basic Usage ⚡

Watch the magic happen! Comments will flow across the screen like a digital river of thoughts! 🌊

exportdefault { setup() { const defaultList = [ { id: 100, text: 'Lightweight' }, { id: 101, text: 'Customizable' }, { id: 102, text: 'Mobile' }, { id: 103, text: 'Vue' }, { id: 104, text: 'Library' }, { id: 105, text: 'VantUI' }, { id: 106, text: '666' }, ]; const list = ref([...defaultList]); constadd = () => { list.value.push({ id: Math.random(), text: 'Barrage' }); }; return { list, add }; }, };

Imitate Video Barrage 🎥

Create a real video experience! Control playback with play/pause functionality - just like your favorite streaming platform! 🎮✨

exportdefault { setup() { const defaultList = [ { id: 100, text: 'Lightweight' }, { id: 101, text: 'Customizable' }, { id: 102, text: 'Mobile' }, { id: 103, text: 'Vue' }, { id: 104, text: 'Library' }, { id: 105, text: 'VantUI' }, { id: 106, text: '666' }, ]; const list = ref([...defaultList]); const barrage = ref<BarrageInstance>(); constadd = () => { 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 }; }, };

API

Props

Attribute	Description	Type	Default
v-model	Barrage data	BarrageItem[]	-
auto-play	Whether to play the bullet screen automatically	boolean	true
rows	The number of lines of text	*number	string*
top	Spacing between the top of the barrage area, unit px	*number	string*
duration	Text animation duration, unit ms	*number	string*
delay	Barrage animation delay, unit ms	number	300

Methods

Use ref to get Barrage instance and call instance methods.

Name	Description	Attribute	Return value
play	Play barrage	-	-
pause	Pause barrage	-	-

Slots

Name	Description
default	Default slot

Types

The component exports the following type definitions:

importtype { BarrageProps, BarrageItem, BarrageInstance } from'vant';

Theming

CSS Variables

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

Name	Default Value	Description
--van-barrage-font-size	16px	-
--van-barrage-space	10px	-
--van-barrage-color	var(--van-white)	-
--van-barrage-font	inherit	-

Related Docs 📚

• Button - Interactive button component
• List - List component for data display
• ConfigProvider - Global configuration
• Advanced Usage - Advanced component usage