vue項(xiàng)目中使用particles實(shí)現(xiàn)粒子背景效果及遇到的坑(按鈕沒(méi)有點(diǎn)擊響應(yīng))

更新時(shí)間：2020年02月11日 08:15:12 作者：意必固我

為了提高頁(yè)面展示效果，登錄界面內(nèi)容比較單一的，粒子效果作為背景經(jīng)常使用到，vue工程中利用vue-particles可以很簡(jiǎn)單的實(shí)現(xiàn)頁(yè)面的粒子背景效果，本文給大家分享在實(shí)現(xiàn)過(guò)程中遇到問(wèn)題，需要的朋友一起看看吧

為了提高頁(yè)面展示效果，登錄界面內(nèi)容比較單一的，粒子效果作為背景經(jīng)常使用到，vue工程中利用vue-particles可以很簡(jiǎn)單的實(shí)現(xiàn)頁(yè)面的粒子背景效果。

解決問(wèn)題：

以背景方式顯示
無(wú)法獲取按鈕焦點(diǎn)，觸發(fā)不了點(diǎn)擊事件

實(shí)現(xiàn)過(guò)程

安裝vue-particles

npm install vue-particles --save-dev

全局配置vue-particles

在main.js里面：

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

使用 vue-particles

在vue文件template標(biāo)簽中：

<template >
 <div v-loading.fullscreen.lock="loading"
    class="login" 
    element-loading-spinner="fa fa-spinner fa-pulse fa-3x fa-fw">
  <vue-particles
    color="#409EFF"
    :particleOpacity="0.7"
    :particlesNumber="80"
    shapeType="circle"
    :particleSize="4"
    linesColor="#409EFF"
    :linesWidth="1"
    :lineLinked="true"
    :lineOpacity="0.4"
    :linesDistance="150"
    :moveSpeed="3"
    :hoverEffect="true"
    hoverMode="grab"
    :clickEffect="true"
    clickMode="push"
   >  </vue-particles>
  <el-form :rules="rules"
       :model="loginFrom"
       class="logContainer"
       ref="loginFrom"
       @keydown.enter.native="loginSubmit">
   <h2 class="logtitle"><i class="fa fa-drupal fa-2x"
       style="color: #505458" /> 人 事 管 理</h2>
   <el-form-item prop="username">
    <el-input type="text"
         v-model="loginFrom.username"
         placeholder="請(qǐng)輸入用戶名"
         class="inputbg"
         auto-complete="off">
     <i slot="prefix"
       class="el-icon-user"></i>
    </el-input>
   </el-form-item>
   <el-form-item prop="password">
    <el-input type="password"
         v-model="loginFrom.password"
         placeholder="請(qǐng)輸入密碼"
         auto-complete="off">
     <i slot="prefix"
       class="el-icon-lock"></i>
    </el-input>
   </el-form-item>
   <el-form-item prop="code">
    <el-input v-model="loginFrom.code"
         auto-complete="off"
         placeholder="驗(yàn)證碼"
         style="width: 63%"
         @keyup.enter.native="loginSubmit">
     <i slot="prefix"
       class="el-icon-view"></i>
    </el-input>
    <div class="login-code">
     <img :src="codeUrl"
        @click="getCode">
    </div>
   </el-form-item>
   <el-checkbox v-model="loginFrom.rememberMe"
          style="margin:0 0 25px 0;">
    記住我
   </el-checkbox>
   <el-button type="primary" 
         style="width:100%; position: relative;"
         @click="loginSubmit">登錄</el-button>
  </el-form>
 </div>
</template>

vue-particles有一個(gè)id為默認(rèn)為particles-js，可以根據(jù)這個(gè)id來(lái)設(shè)置樣式。設(shè)置之后就可以顯示了。

 #particles-js{
    width: 100%;
    height: calc(100% - 100px);
     position: absolute;  
  }

我在做完這一步時(shí)，發(fā)現(xiàn)點(diǎn)擊按鈕觸發(fā)不了。

后來(lái)做了如下修改；加個(gè)樣式 position: relative;，將button的定位寫出相對(duì)定位就OK啦，我也不知道啥原因，想著修改之前是好的，可能被position: absolute; 影響了，所以就一個(gè)個(gè)試 position的屬性

<el-button type="primary" 
         style="width:100%; position: relative;"
         @click="loginSubmit">登錄</el-button>

附：具體參數(shù)說(shuō)明

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"。

總結(jié)

以上所述是小編給大家介紹的vue項(xiàng)目中使用particles實(shí)現(xiàn)粒子背景效果及遇到的坑(按鈕沒(méi)有點(diǎn)擊響應(yīng))，希望對(duì)大家有所幫助！

您可能感興趣的文章: