给自己的项目（vue3）中添加 下雪/樱花飘落的背景
查看更佳效果前往我的博客， 可切换
snows_l's BLOG
http://124.223.41.220/
0、效果图
樱花飘落
雪花飘落
1、安装
yarn add jparticles / npm i jparticles2、引入
import { Snow } from 'jparticles'; // 引入粒子效果库 引入雪花效果库3、使用
在项目中的app.vue/layout.vue 添加如下代码
<!-- 飘 🌸蒙版 -->
<div class="snow" v-show="state.isShowSnow" style="width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 9; pointer-events: none" id="snow"></div>解释， 定位到你想要的层级， 不用担忧覆盖调你的其他内容导致，其他内容无法交互， 只需要加css pointer-events: none,就可以了，上面代码行内样式已经添加
在vue的生命周期钩子函数 onMounted 中new 一下就行
onMounted(() => {
new Snow('#snow', { num: isMobi ? 1 : 2, maxR: 3, minR: 12, maxSpeed: 0.4, minSpeed: 0.1, swing: true, swingProbability: 0.1, spin: true, shape: sakura() });
});解释：最后一个参数调用了一个sakura方法， 返回的是樱花的base64, 你想要什么飘落啥就直接放什么就行呢， 图下图（好想必须是base64才行）
其实就是它
jparticles官网
JParticles - A lightweight, efficient and easy-to-use Canvas library for building some cool particle effects. 一个轻量、高效、易于使用的 Canvas 粒子运动特效库JParticles is a lightweight JavaScript library for build user interfaces base on the Canvas. That provide some cool particle effects to bring a surprise for the users.https://jparticles.js.org/#/examples/quick-start