154 lines
4.3 KiB
Markdown
154 lines
4.3 KiB
Markdown
# Barrage 弹幕
|
|
|
|
### 介绍
|
|
|
|
实现观看视频时弹出的评论性字幕功能。请升级 `vant` 到 >= 4.4.0 版本来使用该组件。
|
|
|
|
### 引入
|
|
|
|
通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。
|
|
|
|
```js
|
|
import { createApp } from 'vue';
|
|
import { Barrage } from 'vant';
|
|
|
|
const app = createApp();
|
|
app.use(Barrage);
|
|
```
|
|
|
|
## 代码演示
|
|
|
|
### 基础用法
|
|
|
|
可以通过 `v-model` 双向绑定弹幕数据，`Barrage` 会在组件区域内播放文字弹幕，使用数组数据 `push()` 可以发送弹幕文字。
|
|
|
|
```html
|
|
<van-barrage v-model="list">
|
|
<div class="video" style="width: 100%; height: 150px"></div>
|
|
</van-barrage>
|
|
<van-space style="margin-top: 10px">
|
|
<van-button @click="add" type="primary" size="small"> 弹幕 </van-button>
|
|
</van-space>
|
|
```
|
|
|
|
```ts
|
|
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
|
|
<van-barrage v-model="list" ref="barrage" :auto-play="false">
|
|
<div class="video" style="width: 100%; height: 150px"></div>
|
|
</van-barrage>
|
|
<van-space style="margin-top: 10px">
|
|
<van-button @click="add" type="primary" size="small" :disabled="!isPlay">
|
|
弹幕
|
|
</van-button>
|
|
<van-button @click="toggle()" size="small">
|
|
{{ isPlay ? '暂停' : '开始' }}
|
|
</van-button>
|
|
</van-space>
|
|
```
|
|
|
|
```ts
|
|
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>();
|
|
const add = () => {
|
|
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_ | `4` |
|
|
| top | 弹幕文字区域顶部间距，单位 `px` | _number \| string_ | `10` |
|
|
| duration | 弹幕文字滑过容器的时间，单位 `ms` | _number \| string_ | `4000` |
|
|
| delay | 弹幕动画延时，单位 `ms` | _number_ | `300` |
|
|
|
|
### 方法
|
|
|
|
通过 ref 可以获取到 Barrage 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
|
|
|
|
| 方法名 | 说明 | 参数 | 返回值 |
|
|
| ------ | -------- | ---- | ------ |
|
|
| play | 播放弹幕 | - | - |
|
|
| pause | 暂停弹幕 | - | - |
|
|
|
|
### Slots
|
|
|
|
| 名称 | 说明 |
|
|
| ------- | -------------- |
|
|
| default | 弹幕组件子元素 |
|
|
|
|
### 类型定义
|
|
|
|
组件导出以下类型定义：
|
|
|
|
```ts
|
|
import type { BarrageProps, BarrageItem, BarrageInstance } from 'vant';
|
|
```
|
|
|
|
## 主题定制
|
|
|
|
### 样式变量
|
|
|
|
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
|
|
|
|
| 名称 | 默认值 | 描述 |
|
|
| ----------------------- | ------------------ | ---- |
|
|
| --van-barrage-font-size | _16px_ | - |
|
|
| --van-barrage-space | _10px_ | - |
|
|
| --van-barrage-color | _var(--van-white)_ | - |
|
|
| --van-barrage-font | _inherit_ | - |
|