这个库与Vue.js3.x不兼容,有更新吗?

发布于 2020-10-11 20:49
共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>

.gif

关于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();
回答问题
848 阅读
1 回答
0