vue 粒子特效的示例代碼

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:29:25

vue 粒子特效的示例代碼

vue 粒子特效的示例代碼:本文介紹了vue 粒子特效的示例代碼，分享給大家，具體如下：實現(xiàn)效果：沒錯，你看到的上圖那些類似于星座圖的點和線，是由vue-particles生成的，而且能與用戶鼠標(biāo)事件產(chǎn)生互動。傳送門：vue-particles 使用教程 npm install vue

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀vue 粒子特效的示例代碼:本文介紹了vue 粒子特效的示例代碼，分享給大家，具體如下：實現(xiàn)效果：沒錯，你看到的上圖那些類似于星座圖的點和線，是由vue-particles生成的，而且能與用戶鼠標(biāo)事件產(chǎn)生互動。傳送門：vue-particles 使用教程 npm install vue

本文介紹了vue 粒子特效的示例代碼，分享給大家，具體如下：

實現(xiàn)效果：

沒錯，你看到的上圖那些類似于星座圖的點和線，是由vue-particles生成的，而且能與用戶鼠標(biāo)事件產(chǎn)生互動。

傳送門：vue-particles

使用教程

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>

屬性：

color: String類型。默認(rèn)'#dedede'。粒子顏色。

particleOpacity: Number類型。默認(rèn)0.7。粒子透明度。

particlesNumber: Number類型。默認(rèn)80。粒子數(shù)量。

shapeType: String類型。默認(rèn)'circle'。可用的粒子外觀類型有："circle","edge","triangle", "polygon","star"。

particleSize: Number類型。默認(rèn)80。單個粒子大小。

linesColor: String類型。默認(rèn)'#dedede'。線條顏色。

linesWidth: Number類型。默認(rèn)1。線條寬度。

lineLinked: 布爾類型。默認(rèn)true。連接線是否可用。

lineOpacity: Number類型。默認(rèn)0.4。線條透明度。

linesDistance: Number類型。默認(rèn)150。線條距離。

moveSpeed: Number類型。默認(rèn)3。粒子運動速度。