vue 粒子特效的示例代碼

更新時(shí)間：2017年09月19日 08:57:39 作者：少俠

本篇文章主要介紹了vue 粒子特效的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

實(shí)現(xiàn)效果：

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

傳送門(mé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 文件——一個(gè)簡(jiǎn)單的例子：

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

App.vue 文件——一個(gè)完整的例子：

<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。單個(gè)粒子大小。
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。粒子運(yùn)動(dòng)速度。
hoverEffect: 布爾類型。默認(rèn)true。是否有hover特效。
hoverMode: String類型。默認(rèn)true?？捎玫膆over模式有: "grab", "repulse", "bubble"。
clickEffect: 布爾類型。默認(rèn)true。是否有click特效。
clickMode: String類型。默認(rèn)true?？捎玫腸lick模式有: "push", "remove", "repulse", "bubble"。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue使用路由的query配置項(xiàng)時(shí)清除地址欄的參數(shù)案例詳解
這篇文章主要介紹了vue使用路由的query配置項(xiàng)時(shí)如何清除地址欄的參數(shù)，本文通過(guò)案例給大家分享完美解決方案,需要的朋友可以參考下
2023-09-09
vue2自定義組件通過(guò)rollup配置發(fā)布到npm的詳細(xì)步驟
這篇文章主要介紹了vue2自定義組件通過(guò)rollup配置發(fā)布到npm,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-03-03
Vue 動(dòng)態(tài)設(shè)置路由參數(shù)的案例分析
這篇文章主要介紹了Vue 動(dòng)態(tài)設(shè)置路由參數(shù)的案例分析,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2018-04-04
vue組件初學(xué)_彈射小球(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇vue組件初學(xué)_彈射小球(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
Vue3設(shè)計(jì)思想及響應(yīng)式源碼解析
這篇文章主要為大家介紹了Vue3設(shè)計(jì)思想及響應(yīng)式源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-11-11
vue中bus的使用及踩坑解決
這篇文章主要為大家詳細(xì)介紹了vue中bus的相關(guān)使用以及涉及到的問(wèn)題與解決,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以跟隨小編一起了解一下
2023-08-08
vue項(xiàng)目打包清除console.log的四種方法總結(jié)
大家在項(xiàng)目開(kāi)發(fā)的時(shí)候,需要看看一些后端接口返回的結(jié)果,會(huì)多次使用console.log項(xiàng)目開(kāi)發(fā)完成打包的時(shí)候,發(fā)現(xiàn)控制臺(tái)一堆的console.log,非常頭疼,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包清除console.log的四種方法,需要的朋友可以參考下
2023-04-04
Vue路由重復(fù)點(diǎn)擊報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了Vue路由重復(fù)點(diǎn)擊報(bào)錯(cuò)問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
用vue設(shè)計(jì)一個(gè)日歷表
這篇文章主要介紹了如何用vue設(shè)計(jì)一個(gè)日歷表，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下
2020-12-12
Vue 進(jìn)階教程之v-model詳解
這篇文章主要介紹了Vue 進(jìn)階教程之v-model詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-05-05