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

发布于 2020-10-11 12:49:51
共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();


回答问题