Barrage 弹幕 - Vant 4
Barrage 弹幕
💬 介绍
弹幕组件让你的应用瞬间充满活力！实现观看视频时弹出的评论性字幕功能，为用户带来沉浸式的互动体验。请升级 vant 到 >= 4.4.0 版本来使用该组件。
📦 引入
通过以下方式来全局注册组件，更多注册方式请参考组件注册。
js
import { createApp } from'vue'; import { Barrage } from'vant'; const app = createApp(); app.use(Barrage);🎯 代码演示
基础用法
可以通过 v-model 双向绑定弹幕数据，Barrage 会在组件区域内播放文字弹幕，使用数组数据 push() 可以发送弹幕文字。简单易用，效果炫酷！
html
ts
exportdefault { 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]); constadd = () => { list.value.push({ id: Math.random(), text: 'Barrage' }); }; return { list, add }; }, };模拟视频弹幕
设置 auto-play 为 false 属性后，需要使用 play() 进行弹幕播放，暂停可以使用 pause() 实现。完美配合视频播放，打造真实弹幕体验！
html
ts
exportdefault { 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 | 弹幕组件子元素 |
类型定义
组件导出以下类型定义：
ts
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 让你的应用充满生机与活力！