關(guān)于vue3使用particles粒子特效的問(wèn)題
更新時(shí)間：2022年06月01日 17:04:36 作者：置酒天晴
這篇文章主要介紹了關(guān)于vue3使用particles粒子特效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
不知道大家有沒(méi)有被particles惡心過(guò)，反正這東西是教育了我一下午時(shí)間。
起初我想直接用 vue-particles 這個(gè)插件去做，但我驚訝的發(fā)現(xiàn)，好像不頂用。
vue-particles 內(nèi)部用了 require 這個(gè)api，vue3已經(jīng)全面棄用了require，去擁抱 commonJSes6 了，改動(dòng)了一個(gè)地方，其他地方也會(huì)出問(wèn)題。
第一步：引入 particles.js
npm i particles.js or yarn add particles.js
第二步：找到 node_modules 內(nèi)的 particles.js
把它弄出來(lái) ：
弄出來(lái)后可以用 npm uninstall particles.js 將依賴(lài)去除
第三步：項(xiàng)目 components 下創(chuàng)建 particles 目錄
將找到的 particles.js 放進(jìn)去后，在其同級(jí)目錄創(chuàng)建 index.vue 與 particles.json：
第四步：index.vue 寫(xiě)入以下內(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 寫(xiě)入以下內(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實(shí)現(xiàn)二維碼數(shù)組的全選與反選功能
在開(kāi)發(fā)Web應(yīng)用程序時(shí),表格數(shù)據(jù)的展示和操作是非常常見(jiàn)的需求之一,特別是在處理表格中的復(fù)選框選擇時(shí),我們經(jīng)常需要實(shí)現(xiàn)全選、反選等功能,這篇文章將帶你深入了解如何在Vue.js中實(shí)現(xiàn)對(duì)二維數(shù)組數(shù)據(jù)的全選和反選功能,需要的朋友可以參考下2024-09-09
Vue.js遞歸組件實(shí)現(xiàn)組織架構(gòu)樹(shù)和選人功能
這篇文章主要介紹了Vue.js遞歸組件實(shí)現(xiàn)組織架構(gòu)樹(shù)和選人功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Vue 微信端掃描二維碼蘋(píng)果端卻只能保存圖片問(wèn)題(解決方法)
這幾天在做項(xiàng)目時(shí)遇到微信掃描二維碼的然后進(jìn)入公眾號(hào)網(wǎng)頁(yè)巴拉巴拉的，然后就很順利的遇到了在安卓端掃碼的時(shí)候，順利的一塌糊涂，然后到了蘋(píng)果端的時(shí)候，就只能出現(xiàn)一個(gè)保存圖片，然后就寫(xiě)一下記錄一下這問(wèn)題的解決方法2020-01-01
在正式場(chǎng)景中我們經(jīng)常遇到一個(gè)問(wèn)題，就是登出頁(yè)面或其他操作的時(shí)候，我們需要重置所有的vuex，讓其變?yōu)槌跏紶顟B(tài)，那么如何重置呢，下面就跟隨小編一起來(lái)了解一下2019-01-01
idea編譯器vue縮進(jìn)報(bào)錯(cuò)問(wèn)題場(chǎng)景分析
idea編譯器出現(xiàn)Vue縮進(jìn)報(bào)錯(cuò)，怎么解決呢，很多朋友遇到這個(gè)問(wèn)題都很棘手，不知該如何解決，今天小編給大家通過(guò)場(chǎng)景分析介紹解決方案，需要的朋友參考下吧2021-07-07
快速解決vue-cli不能初始化webpack模板的問(wèn)題
下面小編就為大家分享一篇快速解決vue-cli不能初始化webpack模板的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
本文主要介紹了vue-element-admin配置小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家介紹了Vue自定義指令v-focus實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了vxe-table中vxe-grid的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vuex中actions優(yōu)雅處理接口請(qǐng)求的方法
在項(xiàng)目開(kāi)發(fā)中，如果使用到了 vuex，通常我會(huì)將所有的接口請(qǐng)求單獨(dú)用一個(gè)文件管理，這篇文章主要介紹了Vuex中actions如何優(yōu)雅處理接口請(qǐng)求,業(yè)務(wù)邏輯寫(xiě)在 actions 中，本文給大家分享完整流程需要的朋友可以參考下2022-11-11