Nuxt3 Vue 鼠标轨迹尾随特效组件实现

// MouseTrail.vue
<template>
  <canvas ref="canvas" class="mouse-trail"></canvas>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'

export default {
  name: 'MouseTrail',
  setup() {
    const canvas = ref(null)
    const particles = ref([])
    const maxParticles = 100
    let animationFrameId = null

    const initCanvas = () => {
      canvas.value.width = window.innerWidth
      canvas.value.height = window.innerHeight
    }

    const draw = () => {
      try {
        const ctx = canvas.value.getContext('2d')
        ctx.clearRect(0, 0, canvas.value.width, canvas.value.height)

        // 在主 Canvas 上绘制尾随粒子
        particles.value = particles.value.filter((particle) => {
          particle.update()
          particle.draw(ctx)
          return particle.alpha > 0
        })

        // 循环调用
        animationFrameId = requestAnimationFrame(draw)
      } catch (error) {
        console.error('Error in draw loop:', error)
      }
    }

    class Particle {
      constructor(x, y) {
        this.x = x
        this.y = y
        this.vx = (Math.random() - 0.5) * 2
        this.vy = (Math.random() - 0.5) * 2
        this.alpha = 1
        this.size = Math.random() * 5 + 3
        this.color = `rgba(255, ${Math.random() * 100 + 155}, 180, ${
          this.alpha
        })`
      }

      update() {
        this.x += this.vx
        this.y += this.vy
        this.alpha -= 0.01
        this.size -= 0.02
      }

      draw(ctx) {
        ctx.save()
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
        ctx.fillStyle = this.color
        ctx.fill()
        ctx.restore()
      }
    }

    const handleMouseMove = (event) => {
      const rect = canvas.value.getBoundingClientRect()
      const x = event.clientX - rect.left
      const y = event.clientY - rect.top

      if (particles.value.length < maxParticles) {
        particles.value.push(new Particle(x, y))
      } else {
        particles.value.shift() // 移除最旧的粒子
        particles.value.push(new Particle(x, y))
      }
    }

    onMounted(() => {
      initCanvas()
      window.addEventListener('mousemove', handleMouseMove)
      window.addEventListener('resize', initCanvas)
      draw()
    })

    onUnmounted(() => {
      window.removeEventListener('mousemove', handleMouseMove)
      window.removeEventListener('resize', initCanvas)
      if (animationFrameId) {
        cancelAnimationFrame(animationFrameId)
      }
    })

    return {
      canvas
    }
  }
}
</script>

<style scoped>
.mouse-trail {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
}
</style>

<template>
  <div >
    <mouse-trail></mouse-trail>
    <NuxtLoadingIndicator />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>