共1个回答
XL
游客xlRpUN
Vue3.x的官方支持,参见:https://www.npmjs.com/package/particles.vue3
安装
npm
npm i particles.vue3
yarn
yarn add particles.vue3
使用
import Particles from "particles.vue3";
createApp(App).use(Particles)
template示例
<template>
<div id="app">
<Particles
id="tsparticles"
:options="{
background: {
color: {
value: '#0d47a1'
}
},
fpsLimit: 60,
interactivity: {
detectsOn: 'canvas',
events: {
onClick: {
enable: true,
mode: 'push'
},
onHover: {
enable: true,
mode: 'repulse'
},
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',
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>
关于tsParticles
的更多
const tsParticles = require("tsparticles");
// or
import { tsParticles } from "tsparticles";
// @path-json 可以是一个对象或数组,会被首先加载,数组会被随机选择
/* tsParticles.loadJSON(@dom-id, @path-json, @callback (optional)); */
tsParticles
.loadJSON("tsparticles", "presets/default.json")
.then((container) => {
console.log("callback - tsparticles config loaded");
})
.catch((error) => {
console.error(error);
});
//或者
/* tsParticles.load(@dom-id, @options); */
tsParticles.load("tsparticles", {
/* options here */
});
//或者
/* tsParticles.loadFromArray(@dom-id, @options, @index (optional)); */
tsParticles.loadFromArray("tsparticles", [
{
/* options here */
},
{
/* other options here */
},
]);
//随机对象
tsParticles.loadFromArray(
"tsparticles",
[
{
/* options here */
},
{
/* other options here */
},
],
1
); //the second one
// 重要提示,如果索引不是 0...<array.length,那么将会被忽略。
// 初始化后可以这样使用:
/* tsParticles.setOnClickHandler(@callback); */
/* 当所有particles加载完后,这个将会触发:*/
tsParticles.setOnClickHandler((event, particles) => {
/* custom on click handler */
});
// 现在你也可以控制动画,包括暂停和重置动画。
// 这些方法不会改变配置,你可以安全的使用你所有的配置。
// domItem(0) 返回dom中第一个tsParticles实体。
const particles = tsParticles.domItem(0);
// play将会开始动画,如果移动没有启用,那么它将不会被激活,仅仅更新帧。
particles.play();
// pause将会停止动画
particles.pause();
回答问题