簡介

vue-particles是粒子背景的Vue.js元件，支援服務端渲染。

github 地址：

https://github.com/creotip/vue-particles

github star: 1K+

最新版本：1.0.9，MIT 協議

主要技術棧

Vue (^ 2.2.6)

particles.js (^ 2.0.0)

元件屬性簡單介紹color: String型別。預設'#dedede'。粒子顏色。particleOpacity: Number型別。預設0.7。粒子透明度。particlesNumber: Number型別。預設80。粒子數量。shapeType: String型別。預設'circle'。可用的粒子外觀型別有："circle","edge","triangle", "polygon","star"。particleSize: Number型別。預設80。單個粒子大小。linesColor: String型別。預設'#dedede'。線條顏色。linesWidth: Number型別。預設1。線條寬度。lineLinked: 布林型別。預設true。連線線是否可用。lineOpacity: Number型別。預設0.4。線條透明度。linesDistance: Number型別。預設150。線條距離。moveSpeed: Number型別。預設3。粒子運動速度。hoverEffect: 布林型別。預設true。是否有hover特效。hoverMode: String型別。預設true。可用的hover模式有: "grab", "repulse", "bubble"。clickEffect: 布林型別。預設true。是否有click特效。clickMode: String型別。預設true。可用的click模式有: "push", "remove", "repulse", "bubble"。專案截圖

快速開發

安裝

npm install vue-particles --save-dev

Main.js

import Vue from 'vue'import VueParticles from 'vue-particles'Vue.use(VueParticles)

app.vue 簡單示例

<template>    <div id="app">      <vue-particles color="#dedede"></vue-particles>    </div> </template>

app.vue 複雜示例

<template>    <div id="app">      <vue-particles        color="#dedede"        :particleOpacity="0.7"        :particlesNumber="80"        shapeType="circle"        :particleSize="4"        linesColor="#dedede"        :linesWidth="1"        :lineLinked="true"        :lineOpacity="0.4"        :linesDistance="150"        :moveSpeed="3"        :hoverEffect="true"        hoverMode="grab"        :clickEffect="true"        clickMode="push"      >      </vue-particles>    </div> </template>

PS

vue-particles 是一款熱門的粒子特效背景元件，整體感覺不錯，但是該開源專案有將近1年多沒更新，所以對於vue2.6以上版本的支援不清楚是否會友好，簡單應用應該沒啥問題。糾結之際，小編又查閱了原生particles.js 開源庫，發現其3年多沒更新了但是star也有20K+。 所以決定用vue-particles 來實現粒子背景特效還是用js 原生的particles.js庫來實現粒子特效，感覺都行。