@Dongad/Danmaku

一个简洁的弹幕动画组件，不提供太多配置，只提供最基础的功能。

示例

<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 | - | 其他任意属性 |

Slots 类型

| 属性 | 参数 | 说明 | | ------- | -------------------- | ---------------------------- | | default | (props: DanmakuItem) | 默认插槽，自定义渲染弹幕元素 |