网友的需求越来越花哨了，直接使用 @catdad/canvas-confetti
五彩纸屑效果，可以用于节日、庆祝等场合，增加网页的趣味性和氛围感。以下是一个简单的五彩纸屑效果实现：
提示
推荐使用 pnpm 安装,我在子项目的，所以需要切换到子项目的 Demo\docs-base 目录下安装pnpmyarnnpmbun
sh
cd Demo\docs-base
pnpm add -D canvas-confettish
yarn add -D canvas-confettish
npm i -D canvas-confettish
bun add -D canvas-confetti在其 官网 上，有最简单的纸屑配置
但是建议还是 vue 封装一下，在 Demo\docs-base\.vitepress\theme\components 文件夹中创建 Confetti.vue
md
docs-base
├─ .vitepress
│ └─ config.mts
│ └─ theme
│ │ ├─ components
│ │ │ └─ Confetti.vue
│ │ └─ index.ts
└─ index.mdConfetti.vue 填入如下代码，保存confetti.vue
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>vue
<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 中注册全局组件
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 中使用md
<!-- index.md -->
<!-- 五彩纸屑组件 -->
<confetti />最后回到首页或者其他页面，插入组件看效果，同理也可以做 雪花效果
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。