当前位置：首页 > VUE

vue实现弹幕评论

2026-02-17 23:07:40VUE

Vue 实现弹幕评论功能

弹幕评论功能通常包括用户输入、弹幕展示和动画效果。以下是基于 Vue 的实现方法：

数据绑定与输入框

创建 Vue 组件，包含输入框和弹幕展示区域：

<template>
  <div class="danmu-container">
    <input v-model="newDanmu" @keyup.enter="addDanmu" placeholder="输入弹幕内容" />
    <div class="danmu-display" ref="displayArea"></div>
  </div>
</template>

弹幕数据结构

在 Vue 的 data 中定义弹幕相关数据：

vue实现弹幕评论

data() {
  return {
    newDanmu: '',
    danmus: [],
    colors: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff'],
    speeds: [5, 6, 7, 8, 9]
  }
}

添加弹幕方法

实现添加弹幕的逻辑：

methods: {
  addDanmu() {
    if (!this.newDanmu.trim()) return

    const danmu = {
      id: Date.now(),
      text: this.newDanmu,
      color: this.colors[Math.floor(Math.random() * this.colors.length)],
      speed: this.speeds[Math.floor(Math.random() * this.speeds.length)],
      top: Math.floor(Math.random() * 80) + 10
    }

    this.danmus.push(danmu)
    this.newDanmu = ''
  }
}

弹幕动画实现

使用 CSS 动画实现弹幕移动效果：

vue实现弹幕评论

.danmu-item {
  position: absolute;
  white-space: nowrap;
  animation: move linear;
  font-size: 20px;
  text-shadow: 1px 1px 2px #000;
}

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

动态渲染弹幕

在 mounted 钩子中创建弹幕元素：

mounted() {
  setInterval(() => {
    this.danmus.forEach(danmu => {
      const el = document.createElement('div')
      el.className = 'danmu-item'
      el.style.color = danmu.color
      el.style.top = `${danmu.top}%`
      el.style.animationDuration = `${danmu.speed}s`
      el.textContent = danmu.text

      this.$refs.displayArea.appendChild(el)

      el.addEventListener('animationend', () => {
        el.remove()
      })
    })

    this.danmus = []
  }, 1000)
}

样式优化

添加基础样式使弹幕更美观：

.danmu-container {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  border: 1px solid #ccc;
}

.danmu-display {
  position: relative;
  width: 100%;
  height: 100%;
}

input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

性能优化

对于大量弹幕，考虑使用虚拟滚动或对象池技术：

// 对象池示例
const danmuPool = []
const POOL_SIZE = 50

function getDanmuElement() {
  if (danmuPool.length > 0) {
    return danmuPool.pop()
  }
  return document.createElement('div')
}

function recycleDanmuElement(el) {
  if (danmuPool.length < POOL_SIZE) {
    danmuPool.push(el)
  } else {
    el.remove()
  }
}