五彩纸屑

简介

网友的需求越来越花哨了，直接使用 @catdad/canvas-confetti

五彩纸屑效果，可以用于节日、庆祝等场合，增加网页的趣味性和氛围感。以下是一个简单的五彩纸屑效果实现：

安装插件

提示

• 推荐使用 pnpm 安装,我在子项目的，所以需要切换到子项目的 Demo\docs-base 目录下安装

pnpm

cd Demo\docs-base
pnpm add -D canvas-confetti

yarn

yarn add -D canvas-confetti

npm

npm i -D canvas-confetti

bun

bun add -D canvas-confetti

创建组件

在其 官网 上，有最简单的纸屑配置

但是建议还是 vue 封装一下，在 Demo\docs-base\.vitepress\theme\components 文件夹中创建 Confetti.vue

docs-base
├─ .vitepress
│  └─ config.mts
│  └─ theme
│  │   ├─ components
│  │   │   └─ Confetti.vue
│  │   └─ index.ts
└─ index.md

配置组件

• 在 Confetti.vue 填入如下代码，保存

confetti.vue

<script setup lang="ts">
import confetti from "canvas-confetti";
import { inBrowser } from "vitepress";

if (inBrowser) {
  /* 纸屑代码这里配置 */
  confetti({
    particleCount: 100,
    spread: 170,
    origin: { y: 0.6 },
  });
}
</script>

警告

npm 打包报错，请使用如下方式

点击查看

<script setup lang="ts">
import { onMounted } from "vue";
import confetti from "canvas-confetti";

onMounted(() =>
  /* 纸屑 */
  confetti({
    particleCount: 100,
    spread: 170,
    origin: { y: 0.6 },
  })
);
</script>

注册组件

在 Demo\docs-base\.vitepress\theme\index.ts 中注册全局组件

/* Demo\docs-base\.vitepress\theme\index.ts */
import DefaultTheme from 'vitepress/theme'
import confetti from "./components/confetti.vue"

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    // 注册组件
    app.component("MNavLinks", MNavLinks),  //导航组件
    app.component('confetti' , confetti)  //五彩纸屑
  },
  Layout: defineComponent({
    // ...其他配置
  }),
}

使用组件

• 在 Demo\docs-base\index.md 中使用

<!-- index.md -->

<!-- 五彩纸屑组件 -->
<confetti />

效果

最后回到首页或者其他页面，插入组件看效果，同理也可以做 雪花效果