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