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