FxConfetti 彩纸效果

全局点击彩纸特效，支持金色星星、彩色纸片和自定义 Emoji 三种模式。

效果描述

用户在页面任意位置点击时，会在点击位置释放彩纸粒子。

金色星星模式（默认）

• 金色星星 (⭐ 形状)
• 金色圆形纸屑

彩色纸片模式

• 彩色方形纸屑（红、绿、蓝、黄、橙）

自定义 Emoji 模式

• 使用 canvas-confetti 的 shapeFromText API 将 Emoji 渲染为粒子形状
• 支持单个或多个 Emoji

配置方式

启用/禁用

themeConfig: {
  confetti: true,   // 启用（默认）
  confetti: false,  // 禁用
}

选择预设形状

themeConfig: {
  // 金色星星（默认）
  confetti: true,

  // 彩色纸片
  confetti: { shape: "colored-paper" },
}

自定义 Emoji

themeConfig: {
  // 单个 Emoji
  confetti: { shapes: "🌸" },

  // 多个 Emoji
  confetti: { shapes: ["🌸", "🎀", "🦄"] },
}

二次散射粒子

默认每次点击会同时释放主粒子和二次散射粒子，可通过 secondary 关闭：

themeConfig: {
  // 关闭二次散射粒子
  confetti: { shape: "colored-paper", secondary: false },
}

提示

当同时配置 shape 和 shapes 时，shapes（自定义 Emoji）优先。

技术细节

• 基于 canvas-confetti 库实现
• 自定义 Emoji 使用 confetti.shapeFromText() API 渲染
• 组件无视觉模板（空 <template>），仅注册全局 click 事件监听器
• 使用 defineClientComponent 懒加载，不影响 SSR
• 与 VitePress 的 View Transition 切换动画兼容