Methods
为满足更多场景 danmaku-vue 提供了这些方法:
列表
| 方法名 | 说明 | 参数 |
|---|---|---|
| play | 开始/继续播放 | - |
| pause | 暂停弹幕播放 | - |
| clear | 停止播放并清空弹幕 | - |
| show | 弹幕显示 | - |
| hide | 弹幕隐藏 | - |
| reset | 重置配置(也可在改变播放区域大小后调用) | - |
| resize | 容器尺寸改变时重新计算滚动距离(需手动调用) | - |
| push | 发送弹幕(插入到弹幕列表末尾,排队显示) | danmu 数据,可以是字符串或对象 |
| add | 发送弹幕(插入到当前播放位置,实时显示) | danmu 数据,可以是字符串或对象 |
| insert | 绘制弹幕(实时插入,不进行数据绑定) | danmu 数据,可以是字符串或对象 |
| getPlayState | 获得当前播放状态 | - |
| getInsertList | 获取使用 insert 方法插入的弹幕列表 | danmu[] |
使用时请注意以下几点:
push和add的返回值为插入后的下标,可通过判断下标的方式对当前插入弹幕进行样式定制;insert跟push/add的区别在于,insert不进行数据绑定,而是直接插入 DOM,适用于直播等场景;- 推荐使用
insert方式单条插入弹幕,因为add会进行数据绑定;
Usage
可通过以下方式调用:
vue
<script setup>
import Danmaku from 'danmaku-vue'
const danmakuRef = ref<InstanceType<typeof Danmaku>>(null)
danmakuRef.value.play()
</script>
<template>
<Danmaku ref="danmakuRef"></Danmaku>
</template>具体用法不在赘述,详情可参考demo。