vue 粒子特效的示例代碼

來源：懂視網責編：小采時間：2020-11-27 22:29:25

vue 粒子特效的示例代碼

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

推薦度：

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

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

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

實現效果：

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

傳送門：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類型。默認'#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。粒子運動速度。