vue3使用弹幕插件

1.安装插件

$ npm install vue3-danmaku --save

2.用法

<template>
  <vue-danmaku v-model:danmus="danmus" loop style="height:100px; width:300px;"></vue-danmaku>
</template>

<script setup>
import vueDanmaku from 'vue3-danmaku'
import { ref } from "vue";

const danmus = ref(['danmu1', 'danmu2', 'danmu3', '...'])
</script>

3.属性

参数	说明	类型	可选值	默认值
danmus	弹幕元素列表，支持纯文本或者自定义对象(支持 v-model)	Array	字符串或对象	[]
channels	轨道数量	Number		0
autoplay	是否自动播放	Boolean		true
useSlot	是否开启弹幕插槽	Boolean		false
loop	是否开启弹幕循环	Boolean		false
fontSize	弹幕字号（slot 模式下不可用）	Number		18
extraStyle	额外样式（slot 模式下不可用）	String
speeds	弹幕速度（每秒移动的像素数）	Number		200
debounce	弹幕刷新频率(ms)	Number		100
randomChannel	随机选择轨道插入	Boolean		false
isSuspend	是否开启弹幕悬浮暂停（试验型功能）	Boolean		false
top	弹幕垂直间距(px)	Number		4
right	弹幕水平间距(px)	Number		0

 4.内置方法

方法名	说明	参数
play	开始/继续播放	-
pause	暂停弹幕播放	-
stop	停止播放并清空弹幕	-
show	弹幕显示	-
hide	弹幕隐藏	-
reset	重置配置	-
resize	容器尺寸改变时重新计算滚动距离（需手动调用）	-
push	发送弹幕（插入到弹幕列表末尾，排队显示）	danmu 数据，可以是字符串或对象
add	发送弹幕（插入到当前播放位置，实时显示）	danmu 数据，可以是字符串或对象
insert	绘制弹幕（实时插入，不进行数据绑定）	danmu 数据，可以是字符串或对象
getPlayState	获得当前播放状态

 5.Events

事件名	说明	返回值
list-end	所有弹幕插入完毕	-
play-end	所有弹幕播放完成（已滚出屏幕）	index（最后一个弹幕的下标）
dm-over	开启弹幕悬浮暂停时，当进入弹幕，暂停时触发	触发的弹幕对象元素
dm-out	开启弹幕悬浮暂停时，当离开弹幕，恢复滚动时触发	触发的弹幕对象元素

 6.Slot

<template>
  <vue-danmaku ref="danmaku" v-model:danmus="danmus" useSlot loop :channels="5">
    <template v-slot:dm="{ index, danmu }">
      <span>{{ index }}{{ danmu.name }}：{{ danmu.text }}</span>
    </template>
  </vue-danmaku>
</template>

<script>
import vueDanmaku from 'vue3-danmaku'

export default {
  setup(props) {
    const danmus = ref([{ avatar: 'http://a.com/a.jpg', name: 'a', text: 'aaa' }, { avatar: 'http://a.com/b.jpg', name: 'b', text: 'bbb' }, ...])

    return { danmus }
  },
}
</script>

7.例子

<template>
  <div class="big">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 8px">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>借阅信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card shadow="always">
      <div class="backgroundImg">
        <img src="../../assets/image/024.png" alt="" />
      </div>
      <vue-danmaku
        v-model:danmus="danmus"
        loop
        style="height: 700px; width: 1610px"
        ref="danmaku"
        :speeds="speeds"
      ></vue-danmaku>
      <div class="buts">
        <h3>弹幕控制中心</h3>
        <el-button round style="margin-bottom: 10px" @click="dplay()">继续</el-button>
        <el-button type="primary" round style="margin-bottom: 10px" @click="pause()">
          暂停
        </el-button>
        <br />
        <el-button type="success" round style="margin-bottom: 10px" @click="show()">显示</el-button>
        <el-button type="info" round style="margin-bottom: 10px" @click="hide()">隐藏</el-button>
        <br />
        <el-button type="warning" round style="margin-bottom: 10px" @click="addspeeds()">
          加速
        </el-button>
        <el-button type="danger" round style="margin-bottom: 10px" @click="jianspeeds()">
          减速
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import vueDanmaku from "vue3-danmaku";
import { ref } from "vue";
//弹幕速度
const speeds = ref(200);
//内容
const danmus = ref([
  "你好呀",
  "你太厉害了",
  "天才",
  "阿斯顿",
  "士大夫大师傅大三法",
  "的撒范德萨是发的 ",
  "啊的撒范德萨范德萨发",
  "大师傅大师傅撒旦重复",
  "的撒范德萨",
  "asdf das",
  "asdfds fds",
  "asdf d ",
  "大三",
]);
//弹幕组件
const danmaku = ref(null);
//继续播放弹幕
const dplay = () => {
  danmaku.value.play();
};
//暂停播放弹幕
const pause = () => {
  danmaku.value.pause();
};
//显示弹幕
const show = () => {
  danmaku.value.show();
};
//隐藏弹幕
const hide = () => {
  danmaku.value.hide();
};
//弹幕加速
const addspeeds = () => {
  console.log(speeds.value);
  speeds.value += 10;
};
//弹幕减速
const jianspeeds = () => {
  console.log(speeds.value);
  speeds.value -= 10;
};
</script>

<style>
.big {
  position: relative;
}
.backgroundImg {
  position: absolute;
  height: 700px;
  width: 1610px;
  img {
    height: 100%;
    width: 100%;
    opacity: 0.7;
  }
}

.buts {
  position: absolute;
  left: 680px;
  top: 260px;
}
</style>

官网 vue3-danmaku - npm