Particles.js 进入 Vue 组件

Posted 2023-02-23

【中文标题】Particles.js 进入 Vue 组件

【英文标题】：Particles.js into Vue component

【发布时间】：2018-10-24 19:01:35

【问题描述】：

我正在尝试使particles.js 适应以下示例中的 Vue.js 组件： https://codepen.io/MichaelVanDenBerg/pen/WpXGRm

但是，当使用下面的代码时，我在控制台中收到以下错误消息：

[Vue 警告]：挂载钩子错误：“TypeError：this.particles 不是 函数”

如何在下面的代码中修复它？

模板：

</template>
    <div>
        <div id="particles-js"></div>
    </div>
</template>

脚本：

<script>
import particles from 'particles.js'
export default 
    mounted() 
        this.initParticles()
    ,
    methods: 
        initParticles () 
            particles("particles-js", 
                "particles": 
                    "number": 
                        "value": 80,
                        "density": 
                            "enable": true,
                            "value_area": 700
                        
                    ,
                    "color": 
                        "value": "#ffffff"
                    ,
                    "shape": 
                        "type": "circle",
                        "stroke": 
                            "width": 0,
                            "color": "#000000"
                        ,
                        "polygon": 
                            "nb_sides": 5
                        ,
                    ,
                    "opacity": 
                        "value": 0.5,
                        "random": false,
                        "anim": 
                            "enable": false,
                            "speed": 1,
                            "opacity_min": 0.1,
                            "sync": false
                        
                    ,
                    "size": 
                        "value": 3,
                        "random": true,
                        "anim": 
                            "enable": false,
                            "speed": 40,
                            "size_min": 0.1,
                            "sync": false
                        
                    ,
                    "line_linked": 
                        "enable": true,
                        "distance": 150,
                        "color": "#ffffff",
                        "opacity": 0.4,
                        "width": 1
                    ,
                    "move": 
                        "enable": true,
                        "speed": 6,
                        "direction": "none",
                        "random": false,
                        "straight": false,
                        "out_mode": "out",
                        "bounce": false,
                        "attract": 
                            "enable": false,
                            "rotateX": 600,
                            "rotateY": 1200
                        
                    
                ,
                "interactivity": 
                    "detect_on": "canvas",
                    "events": 
                        "onhover": 
                                "enable": true,
                                "mode": "grab"
                        ,
                        "onclick": 
                            "enable": true,
                            "mode": "push"
                        ,
                        "resize": true
                    ,
                    "modes": 
                        "grab": 
                            "distance": 140,
                            "line_linked": 
                                "opacity": 1
                            
                        ,
                        "bubble": 
                            "distance": 400,
                            "size": 40,
                            "duration": 2,
                            "opacity": 8,
                            "speed": 3
                        ,
                        "repulse": 
                            "distance": 200,
                            "duration": 0.4
                        ,
                        "push": 
                            "particles_nb": 4
                        ,
                        "remove": 
                            "particles_nb": 2
                        
                    
                ,
                "retina_detect": true
            )
        
    

</script>

CSS：

<style scoped>
#particles-js 
    position: absolute;
    width: 100%;
    height: 100%;
    background: #00356B;

</style>

【参考方案1】：

particles.js package 不导出任何内容，而是导出 sets window.particlesJS。

要使用这个包，只需在脚本中导入它，然后调用particlesJS()：

import 'particles.js'
export default 
  // ...
  methods: 
    initParticles() 
      window.particlesJS('particles-js', /* ... */)
    
  

demo

【讨论】：

非常感谢您为演示所做的努力，我正在处理这个错误并且看到您的评论让我回到了正轨。