Barrage 彈幕 - Vant 4

Barrage 彈幕

💬 介紹

彈幕元件讓你的應用瞬間充滿活力！實現觀看影片時彈出的評論性字幕功能，為使用者帶來沉浸式的互動體驗。請升級 vant 到 >= 4.4.0 版本來使用該元件。

📦 引入

透過以下方式來全域註冊元件，更多註冊方式請參考元件註冊。

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

🎯 程式碼演示

基礎用法

可以透過 v-model 雙向綁定彈幕資料，Barrage 會在元件區域內播放文字彈幕，使用陣列資料 push() 可以發送彈幕文字。簡單易用，效果炫酷！

html

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() 實現。完美配合影片播放，打造真實彈幕體驗！

html

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>(); 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

參數	說明	類型	預設值
v-model	彈幕資料	BarrageItem[]	-
auto-play	是否自動播放彈幕	boolean	`true`
rows	彈幕文字行數	*number	string*
top	彈幕文字區域頂部間距，單位 `px`	*number	string*
duration	彈幕文字滑過容器的時間，單位 `ms`	*number	string*
delay	彈幕動畫延時，單位 `ms`	number	`300`

方法

透過 ref 可以取得 Barrage 實例並呼叫實例方法，詳見元件實例方法。

方法名	說明	參數	回傳值
play	播放彈幕	-	-
pause	暫停彈幕	-	-

Slots

名稱	說明
default	彈幕元件子元素

類型定義

元件匯出以下類型定義：

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

主題定製

樣式變數

元件提供了下列 CSS 變數，可用於自訂樣式，使用方法請參考 ConfigProvider 元件。

名稱	預設值	描述
--van-barrage-font-size	16px	-
--van-barrage-space	10px	-
--van-barrage-color	var(--van-white)	-
--van-barrage-font	inherit	-

📝 總結

Barrage 彈幕元件是為你的應用注入活力的神奇工具！💬 它能讓靜態的內容瞬間變得生動有趣，為使用者帶來沉浸式的互動體驗。無論是影片播放、直播互動還是活動展示，都能讓你的應用更加引人入勝。

🎯 核心特性：

🎬 影片同步：完美配合影片播放控制
🎨 靈活配置：支援行數、速度、延時等多種參數
🎭 動態新增：即時推送新彈幕內容
📱 行動優化：專為行動端體驗設計
🎪 流暢動畫：絲滑的彈幕滾動效果
🎮 播放控制：支援播放、暫停等操作

從影片網站到直播平台，從活動頁面到互動展示，Barrage 讓你的應用充滿生機與活力！

Barrage 彈幕 ​

💬 介紹 ​

📦 引入 ​

🎯 程式碼演示 ​

基礎用法 ​

模擬影片彈幕 ​

API ​

Props ​

方法 ​

Slots ​

類型定義 ​

主題定製 ​

樣式變數 ​

📝 總結 ​

🔗 相關內容 ​