当前位置：首页 > VUE

vue实现弹幕评论

2026-03-29 23:31:25VUE

Vue 实现弹幕评论功能

基础弹幕实现

组件结构设计 创建一个弹幕组件Danmu.vue，包含以下核心部分：

弹幕容器：用于显示弹幕内容
弹幕数据：存储弹幕消息数组
弹幕样式：控制弹幕位置、颜色等

数据驱动渲染 使用Vue的响应式特性管理弹幕数据：

data() {
  return {
    danmus: [], // 弹幕数据
    colors: ['#ff0000', '#00ff00', '#0000ff'] // 弹幕颜色可选
  }
}

弹幕动画实现 通过CSS动画控制弹幕移动：

vue实现弹幕评论

.danmu-item {
  position: absolute;
  white-space: nowrap;
  animation: move linear;
  animation-fill-mode: forwards;
}

@keyframes move {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

高级功能实现

弹幕发送功能 添加发送弹幕的表单和逻辑：

methods: {
  sendDanmu() {
    if (!this.newDanmu) return;
    this.danmus.push({
      id: Date.now(),
      text: this.newDanmu,
      color: this.colors[Math.floor(Math.random() * this.colors.length)],
      top: Math.random() * 80 + '%'
    });
    this.newDanmu = '';
  }
}

弹幕轨道管理 实现多轨道弹幕避免重叠：

vue实现弹幕评论

computed: {
  danmuTracks() {
    const tracks = [[], [], []]; // 3条轨道
    this.danmus.forEach(danmu => {
      const trackIndex = Math.floor(Math.random() * tracks.length);
      tracks[trackIndex].push(danmu);
    });
    return tracks;
  }
}

性能优化 使用虚拟滚动优化大量弹幕：

// 只渲染可视区域内的弹幕
visibleDanmus() {
  return this.danmus.filter(danmu => {
    const element = document.getElementById(`danmu-${danmu.id}`);
    if (!element) return false;
    const rect = element.getBoundingClientRect();
    return rect.right > 0 && rect.left < window.innerWidth;
  });
}

完整组件示例

<template>
  <div class="danmu-container">
    <div v-for="(danmu, index) in visibleDanmus" 
         :key="danmu.id"
         :id="`danmu-${danmu.id}`"
         class="danmu-item"
         :style="{
           color: danmu.color,
           top: danmu.top,
           animationDuration: `${Math.random() * 3 + 5}s`
         }">
      {{ danmu.text }}
    </div>

    <div class="danmu-input">
      <input v-model="newDanmu" @keyup.enter="sendDanmu">
      <button @click="sendDanmu">发送</button>
    </div>
  </div>
</template>

注意事项