Home > Article > Web Front-end > How to solve the problem of using particles special effects in vue3
vue-particles uses the require API internally. Vue3 has completely abandoned require and embraced commonJSes6. If one place is changed, problems will occur in other places.
npm i particles.js or yarn add particles.js
Get it out:
After getting it out, you can use npm uninstall particles.js to remove the dependency
After putting the found particles.js in, create index.vue and particles.json in its same-level directory:
<template> <div class="particles-js-box"> <div id="particles-js"></div> </div> </template>
<script> /* eslint-disable */ import particlesJs from "./particles.js"; import particlesConfig from "./particles.json"; export default { data() { return {}; }, mounted() { this.init(); }, methods: { init() { particlesJS("particles-js", particlesConfig); document.body.style.overflow = "hidden"; }, }, }; </script>
<style scoped> .particles-js-box { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } #particles-js { background-color: #2d3a4b; width: 100%; height: 100%; } </style>
{ "particles": { "number": { "value": 60, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#ffffff" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 5 }, "image": { "src": "img/github.svg", "width": 100, "height": 100 } }, "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": 4, "direction": "none", "random": false, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 100, "rotateY": 1200 } } }, "interactivity": { "detect_on": "Window", "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 }
1. Replace lines 1416 - 1427 with:
Object.deepExtend = function f(destination, source) { for (var property in source) { if (source[property] && source[property].constructor && source[property].constructor === Object) { destination[property] = destination[property] || {}; f(destination[property], source[property]) } else { destination[property] = source[property]; } } return destination; };
2. Add the last line:
export default window.particlesJS
<template> <div> <particles></particles> </div> </template>rrree
The above is the detailed content of How to solve the problem of using particles special effects in vue3. For more information, please follow other related articles on the PHP Chinese website!