vue3引入particles(粒子特效)
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结使用vue3引入particles。1.引入库代码如下(示例):yarn add particles.vue3 --save或者npm install particles.vue3 --save2.引入particles在main.js代码中添加全局import
·
使用vue3引入particles。
1.引入库
代码如下(示例):
yarn add particles.vue3@^1.22.0 --save
或者
npm install particles.vue3@^1.22.0 --save
2.引入particles
在main.js代码中添加全局变量
import Particles from 'particles.vue3';
createApp(App).use(Particles).mount('#app');
3.在页面引用
选择要引用粒子特效的页面添加如下代码。
<template>
<!--引入粒子特效-->
<div class="bkpro-login-canvas">
<Particles
id="tsparticles"
:particlesInit="particlesInit"
:particlesLoaded="particlesLoaded"
:options="options"
/>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, UnwrapRef, ref } from "vue";
export default defineComponent({
setup() {
const options = {
background: {
color: {
value: "#000",//粒子颜色
},
},
fpsLimit: 60,
interactivity: {
events: {
onClick: {
enable: true,
mode: "push",//可用的click模式有: "push", "remove", "repulse", "bubble"。
},
onHover: {
enable: true,
mode: "grab",//可用的hover模式有: "grab", "repulse", "bubble"。
},
resize: true,
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
},
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",//'#dedede'。线条颜色。
distance: 150,//线条长度
enable: true,//是否有线条
opacity: 0.5,//线条透明度。
width: 1,//线条宽度。
},
collisions: {
enable: false,
},
move: {
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 4,//粒子运动速度。
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 80,//粒子数量。
},
opacity: {
value: 0.5,//粒子透明度。
},
shape: {
type: "circle", //可用的粒子外观类型有:"circle","edge","triangle", "polygon","star"
},
size: {
random: true,
value: 5,
},
},
detectRetina: true,
};
return {
options,
};
},
});
</script>
总结
最后就可以在页面引入粒子特效了。
更多推荐
已为社区贡献1条内容
所有评论(0)