前言
之前看到博客论坛上背景页的粒子效果觉得很新奇，于是去网络上找了一下demo，结果发现基本上都是vue+js去实现粒子背景效果，不甘心得我在经过一番寻找，发现tsparticles 适用于ts 实现粒子背景，而且其github中也给出了相关demo，链接如下：codesandbox.io/s/particles…
因此我也将我的代码改造了一番
准备
安装tsparticles 和particles.vue3
yarn add particles.vue3 tsparticles -D
代码改造
此时我们只需修改以下文件并能的到想要的粒子背景
index.html
<style>
body {
padding: 0;
margin: 0;
height: 100%;
}
html {
height: 100%;
}
#app {
height: 100%;
}
</style>
<body>
<div id="app"></div>
</body>
index.ts
import { createApp } from 'vue' // Vue 3.x 引入 vue 的形式
import router from './router/index'
import store from './store/index'
import App from './App.vue' // 引入 APP 页面组建
import './index.scss'
import './index.less'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import Particles from "particles.vue3";
const app = createApp(App) // 通过 createApp 初始化 app
app.use(router).use(store).use(Particles).use(ElementPlus).mount('#app') // 将页面挂载到 root 节点
此时启动会报错说particles.vue3找不到，如果已经存在需要声明
我们需在shims-vue.d.ts中声明particles.vue3
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
declare module "particles.vue3";
APP.vue
<template>
<div style="height: 100%;">
<router-view></router-view>
<Particles
id="tsparticles"
:options="{
background: {
color: {
value: '#0d47a1'
}
},
fpsLimit: 60,
interactivity: {
detectsOn: 'window',
events: {
onClick: {
enable: true,
mode: 'push'
},
onHover: {
enable: true,
mode: 'repulse'
},
resize: true
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
speed: 3
},
push: {
quantity: 4
},
repulse: {
distance: 200,
duration: 0.4
}
}
},
particles: {
color: {
value: '#ffffff'
},
links: {
color: '#ffffff',
distance: 150,
enable: true,
opacity: 0.5,
width: 1
},
collisions: {
enable: true
},
move: {
direction: 'none',
enable: true,
outMode: 'bounce',
random: false,
speed: 6,
straight: false
},
number: {
density: {
enable: true,
value_area: 800
},
value: 80
},
opacity: {
value: 0.5
},
shape: {
type: 'circle'
},
size: {
random: true,
value: 5
}
},
detectRetina: true
}"
/>
</div>
</template>
<script lang="ts">
import { ref } from "vue";
export default {
setup() {
}
};
</script>
<style scoped>
img {
width: 200px;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
}
#app {
height: 100%;
}
#tsparticles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;
z-index: -10;
}
</style>
