Vue - vue3-particles Error - n.component is not a function 渲染期间出错

Question

你好 :) 我想从库 text 渲染粒子 这是本教程链接中的完全基本示例。但是我在控制台中遇到了这个奇怪的问题...... enter error image description here

我可以向您展示我的组件文件中的包和代码

package.json（不是全部，但显示必需品：>）

"ts-node": "^10.9.1",
    "tsparticles": "^2.8.0",
    "typescript": "^4.9.4",
    "vite": "^4.0.3",
    "vue": "^3.2.33",
    "vue-i18n": "^9.2.2",
    "vue3-particles": "^2.8.0",
    "yarn": "^1.22.19"

我试着做这样的事情：

MagicParticles.vue 中的粒子脚本

<script setup>
import styles from "./MagicParticles.module.scss";
import Particles from "vue3-particles";
import { loadFull } from "tsparticles";
const particlesInit = async (engine) => {
  await loadFull(engine);
};

const particlesLoaded = async (container) => {
  console.log("Particles container loaded", container);
};

const defaultParams = {
  background: {
    color: {
      value: "#0d47a1",
    },
  },
  fpsLimit: 120,
  interactivity: {
    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,
        area: 800,
      },
      value: 80,
    },
    opacity: {
      value: 0.5,
    },
    shape: {
      type: "circle",
    },
    size: {
      random: true,
      value: 5,
    },
  },
  detectRetina: true,
};
</script>

模板

<template>
  <div :class="styles.particlesBox">
    <Particles
      id="tsparticles"
      :particlesInit="particlesInit"
      :particlesLoaded="particlesLoaded"
      url="http://foo.bar/particles.json"
    />

    <Particles
      id="tsparticles"
      :particlesInit="particlesInit"
      :particlesLoaded="particlesLoaded"
      :options="defaultParams"
    />
  </div>
</template>

enter error image description here

Answer 1

您应该像这样使用该组件：

import { ParticlesComponent } from 'vue3-particles';