Particles.js into Vue component
我正在尝试从以下示例中将particles.js适配到Vue.js组件:
https://codepen.io/MichaelVanDenBerg/pen/WpXGRm
但是,当使用下面的代码时,我在控制台中收到以下错误消息:
[Vue warn]: Error in mounted hook:"TypeError: this.particles is not a
function"
如何在下面的代码中修复它?
模板:
1 2 3 4 5 | </template> </template> |
脚本:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | 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 }) } } } |
CSS:
1 2 3 4 5 6 7 8 | <style scoped> #particles-js { position: absolute; width: 100%; height: 100%; background: #00356B; } </style> |
要使用此软件包,只需将其导入脚本中,然后调用
1 2 3 4 5 6 7 8 9 | import 'particles.js' export default { // ... methods: { initParticles() { window.particlesJS('particles-js', {/* ... */}) } } } |
演示