關(guān)于vue3使用particles粒子特效的問題
更新時(shí)間：2022年06月01日 17:04:36 作者：置酒天晴
這篇文章主要介紹了關(guān)于vue3使用particles粒子特效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
不知道大家有沒有被particles惡心過，反正這東西是教育了我一下午時(shí)間。
起初我想直接用 vue-particles 這個(gè)插件去做，但我驚訝的發(fā)現(xiàn)，好像不頂用。
vue-particles 內(nèi)部用了 require 這個(gè)api，vue3已經(jīng)全面棄用了require，去擁抱 commonJSes6 了，改動(dòng)了一個(gè)地方，其他地方也會(huì)出問題。
第一步：引入 particles.js
npm i particles.js or yarn add particles.js
第二步：找到 node_modules 內(nèi)的 particles.js
把它弄出來 ：
弄出來后可以用 npm uninstall particles.js 將依賴去除
第三步：項(xiàng)目 components 下創(chuàng)建 particles 目錄
將找到的 particles.js 放進(jìn)去后，在其同級(jí)目錄創(chuàng)建 index.vue 與 particles.json：
第四步：index.vue 寫入以下內(nèi)容
<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.json 寫入以下內(nèi)容
{
"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
}第六步：修改 particles.js
1、1416行 - 1427行 替換為：
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、最后一行添加：
export default window.particlesJS
第七步：引入這里的index.vue
<template> ? <div> ? ? <particles></particles> ? </div> </template>
<script>
import Particles from '@/components/particles/index.vue'
export default {
? components: {
? ? "particles":Particles
? }
};
</script>以上七步足矣！ 這些僅為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在使用vue-router的項(xiàng)目中,實(shí)例化VueRouter是其配置選項(xiàng)routes該選項(xiàng)指定路由與視圖的組件的關(guān)系或者路由與其他路由的關(guān)系，Router配置選項(xiàng)中是其中最重要的配置。本文就詳細(xì)的介紹一下2021-10-10
vue實(shí)現(xiàn)虛擬列表組件解決長列表性能問題
這篇文章主要介紹了在vue中實(shí)現(xiàn)虛擬列表組件，解決長列表性能問題,本文給大家分享實(shí)現(xiàn)思路及實(shí)例代碼，需要的朋友可以參考下2022-07-07
react在中后臺(tái)項(xiàng)目中由于在處理復(fù)雜的業(yè)務(wù)邏輯或組件的復(fù)用問題比vue優(yōu)雅而被人認(rèn)可，但也更需要團(tuán)隊(duì)技術(shù)整體比較給力，領(lǐng)頭大佬的設(shè)計(jì)與把關(guān)能力要更優(yōu)秀，因此開發(fā)成本更大，下面文章就來詳細(xì)介紹,需要的朋友可以參考下2021-09-09
在Vue.js中,您可以使用watch選項(xiàng)來創(chuàng)建偵聽器,以偵聽特定屬性的變化,偵聽器可以在屬性發(fā)生變化時(shí)執(zhí)行相關(guān)的邏輯,本文給大家詳細(xì)講講Vue中watch偵聽器的用法,需要的朋友可以參考下2023-11-11
Vue項(xiàng)目打包后可修改基礎(chǔ)接口地址配置的具體操作
vue項(xiàng)目打包過后發(fā)現(xiàn)地址錯(cuò)了或者發(fā)布到別的服務(wù)器發(fā)現(xiàn)請(qǐng)求的地址不對(duì),每次都要去重新打包,太浪費(fèi)時(shí)間,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包后可修改基礎(chǔ)接口地址配置的具體操作,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了Vue自定義指令的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了關(guān)于element-ui 側(cè)邊欄的router問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
如何刪除vue項(xiàng)目下的node_modules文件夾
這篇文章主要介紹了如何刪除vue項(xiàng)目下的node_modules文件夾，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue3?圖片懶加載的兩種方式、IntersectionObserver和useIntersectionObserve
這篇文章主要介紹了vue3?圖片懶加載的兩種方式、IntersectionObserver和useIntersectionObserver實(shí)例詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue 父組件中調(diào)用子組件函數(shù)的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06