<template>
  <div style="display: flex; flex-direction: column; align-items: center">
    <Danmaku
      ref="danma"
      :paused="paused"
      style="
        width: 600px;
        height: 450px;
        background-color: black;
        resize: both;
        overflow: hidden;
      ">
      <template #="danmakuItem">
        <div
          @mouseenter="toggleItemPaused(danmakuItem)"
          @mouseleave="toggleItemPaused(danmakuItem)"
          style="cursor: pointer">
          {{ danmakuItem.text }}
        </div>
      </template>
    </Danmaku>
    <div class="danma-controls">
      <select v-model="danmaItem.type">
        <option value="move">move</option>
        <option value="top">top</option>
        <option value="bottom">bottom</option>
      </select>
      <input type="color" v-model="danmaItem.color" />
      <input v-model="danmaItem.text" />
      <button @click="draw">发送</button>
      <button @click="togglePaused">{{ paused ? "播放" : "暂停" }}</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import Danmaku from "dongad-danmaku";
import type { DanmakuItem } from "dongad-danmaku";

const danma = ref<InstanceType<typeof Danmaku>>();

const paused = ref(false);
const togglePaused = () => {
  paused.value = !paused.value;
};
const toggleItemPaused = (da: DanmakuItem) => {
  if (!da.$el) return;
  if (da.$el.style.animationPlayState === "paused") {
    da.$el.style.animationPlayState = "running";
  } else {
    da.$el.style.animationPlayState = "paused";
  }
};

const danmaItem = ref<DanmakuItem>({
  text: "",
  type: "move",
  color: "#ffffff",
});
const draw = () => {
  const item = { ...danmaItem.value };
  danma.value?.draw([item]);
};
</script>

<style scoped>
.danma-controls {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.danma-controls > * {
  display: block;
  height: 24px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid grey;
}

button {
  background-color: #0078d4;
  color: white;
}
</style>

API

Props

属性	类型	默认值	说明
paused	boolean	false	控制弹幕是否暂停
allowOverlap	boolean	false	控制是否允许弹幕重叠
lineHeight	number	24	弹幕轨道高度
horizontalSpacing	number	20	弹幕横向间距
visible	object	-	弹幕可见性配置

visible 对象

属性	类型	默认值	说明
top	boolean	true	控制顶部弹幕可见性
bottom	boolean	true	控制底部弹幕可见性
move	boolean	true	控制滚动弹幕可见性
color	boolean	true	控制彩色弹幕可见性

Methods

方法名	类型	说明
draw	(danmakuItems: DanmakuItem[]) => void	绘制弹幕，参数为弹幕数组

DanmakuItem 类型

属性	类型	默认值	说明
type	"top" \| "bottom" \| "move"	-	弹幕显示位置
text	string	-	弹幕内容
color	string	"white"	弹幕颜色
size	number	16	字体大小
duration	number	5	动画时长（秒）
style	string	-	自定义样式
class	string	-	自定义类名
$width	number	-	弹幕宽度
$speed	number	-	移动速度
$tunnelIdx	number	-	占用轨道索引
$el	HTMLElement	-	弹幕元素 DOM 对象
[key: string]	any	-	其他任意属性