在 Vue 3 中使用 canvas-confetti 插件

news2025/5/11 5:48:22

🎉 在 Vue 3 中使用 canvas-confetti 插件

canvas-confetti 是一个轻量、无依赖的 JavaScript 动画库，用于在网页上展示彩带、庆祝动画。非常适合用于抽奖、支付成功、活动庆祝等场景。

本教程将指导你如何在 Vue 3 项目中集成并使用该插件。

📦 安装

使用 npm 或 pnpm 安装：

npm install canvas-confetti
# 或者
pnpm add canvas-confetti

🛠️ 在 Vue 3 中基本使用

1. 创建一个可重用组件（`ConfettiCanvas.vue`）

<template>
  <canvas ref="canvas" class="confetti-canvas"></canvas>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import confetti from 'canvas-confetti'

const canvas = ref(null)
let myConfetti = null

onMounted(() => {
  if (canvas.value) {
    // 创建 confetti 实例，绑定 canvas
    myConfetti = confetti.create(canvas.value, {
      resize: true,
      useWorker: true
    })
  }
})

// 暴露一个函数用于触发
defineExpose({
  fire: () => {
    myConfetti &&
      myConfetti({
        particleCount: 100,
        spread: 70,
        origin: { y: 0.6 }
      })
  }
})
</script>

<style scoped>
.confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
}
</style>

2. 在父组件中使用

<template>
  <button @click="launchConfetti">庆祝一下！</button>
  <ConfettiCanvas ref="confettiRef" />
</template>

<script setup>
import { ref } from 'vue'
import ConfettiCanvas from './components/ConfettiCanvas.vue'

const confettiRef = ref(null)

function launchConfetti() {
  confettiRef.value?.fire()
}
</script>

💡 进阶用法

// 自定义彩带颜色、角度、速度
myConfetti({
  angle: 90,
  spread: 360,
  startVelocity: 45,
  particleCount: 150,
  origin: { x: 0.5, y: 0.5 },
  colors: ['#bb0000', '#ffffff', '#00bb00']
})

🪝 options参数说明

该参数是一个可选对象，它具有以下属性：confetti options

particleCount Integer （默认值： 50）：要启动的五彩纸屑的数量。越多越有趣…但要酷一点，这涉及到很多数学。
angle Number （default ： 90）：发射五彩纸屑的角度，以度为单位。90 是笔直向上的。
spread Number （default： 45）：五彩纸屑可以偏离中心多远，以度为单位。45 表示五彩纸屑将在定义的正负 22.5 度处发射。angle
startVelocity 数字（默认值：45）：五彩纸屑开始移动的速度，以像素为单位。
decay Number （default： 0.9）：五彩纸屑失去速度的速度。将此数字保持在 0 到 1 之间，否则五彩纸屑会加速。更好的是，永远不要改变它。
gravity Number （default： 1）：粒子下拉的速度。1 是全重力，0.5 是半重力，依此类推，但没有限制。如果您愿意，您甚至可以使粒子上升。
drift Number （default： 0）：五彩纸屑将漂移到一侧的程度。默认值为 0，这意味着它们将直接下降。对 left 使用负数，对 right 使用正数。
flat 布尔值（默认值： false）：（可选）关闭三维五彩纸屑在现实世界中会具有的倾斜和摆动。是的，他们看起来有点难过，但你们都要求他们，所以不要怪我。
ticks Number （default： 200）：五彩纸屑移动的次数。这是抽象的…但是，如果五彩纸屑对您来说消失得太快，请玩弄它。
origin Object：从何处开始发射五彩纸屑。如果您愿意，请随时在屏幕外启动。
origin.x 数字（默认值：0.5）：页面上的位置，分别是左边缘和右边缘。x01
origin.y 数字（默认值：0.5）：页面上的位置，上边缘和下边缘。y01
colors Array：颜色字符串数组，十六进制格式…你知道的，比如 .#bada55
shapes 数组<字符串|Shape>：五彩纸屑的形状数组。有、和的 3 个内置值。默认设置是在均匀混合中同时使用正方形和圆形。要使用单个形状，您可以在数组中只提供一个形状，例如 .您还可以通过提供一个值来更改组合，例如使用两个第三个圆和一个第三个正方形。您还可以使用 confetti.- - shapeFromPath 或 confetti.shapeFromText 帮助程序方法创建自己的形状。squarecirclestar[‘star’][‘circle’, ‘circle’, ‘square’]
scalar Number （default ： 1）：每个五彩纸屑粒子的缩放因子。使用小数点使五彩纸屑更小。继续，试试微小的五彩纸屑，它们很可爱！
zIndex Integer （default： 100）：毕竟，五彩纸屑应该在上面。但是如果你有一个疯狂的高页，你可以把它设置得更高。
disableForReducedMotion 布尔值（默认值： false）：为喜欢减少运动的用户完全禁用五彩纸屑。在这种情况下，承诺将立即解决。confetti()

我之前开发中有一组好用的参数配置，大家可以参考下

// 多个角度方向触发爆炸
const angles = [60, 120, 180, 240, 300, 360];
angles.forEach((angle) => {
  canvasRefs.value.confetti({
    particleCount: 30,
    spread:40,               // 爆炸范围大
    startVelocity: 18,         // 爆炸速度快
    angle,                     // 多角度发射
    origin: { x: 0.5, y: 0.4 }, // 居中爆炸
    scalar: 1.2,
    decay: 0.9
  });
});