vueプロジェクトでparticlesを使って粒子のバックグラウンド効果と遭遇したピットを実現します。

ページの展示効果を高めるために、登録画面の内容は比較的に単一で、粒子効果は背景としてよく使われています。vue-particlesはページの粒子背景効果を簡単に実現できます。
問題を解決する:

は背景で表示されます。

ボタンの焦点が取れなくて、イベントをクリックできませんでした。

実現プロセス
vue-particlesをインストールしますnpm install vue-particles --save-devグローバル設定vue-particles
メールの中にあります

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

vue-particlesを使う
vueファイルtemplateタグには、

<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="      "
         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="     "
         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="   "
         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にはデフォルトでparticles-jsというidがありますが、このidでスタイルを設定することができます。設定後に表示されます。

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

このステップを終えた時、ボタンを押すとトリガできないことに気づきました。
その後、次のように修正しました。スタイルposition:relativeを追加します。buttonの位置付けを相対的な位置付けに書けばいいです。私も原因が分かりません。修正する前はいいと思います。  影響しますので、一つ一つpositionの属性を試してみます。

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

付：具体的なパラメータ説明
カラー：Stringタイプ。黙認する。粒子の色
particleOpacity：Numberタイプ。デフォルト0.7。粒子の透明度
particlesNumber：Numberタイプです。デフォルト80。粒子の数。
sharpeType:Stringタイプです。デフォルト。使用可能な粒子の外観タイプは、「circele」「edge」「triangle」「polygon」「star」です。
particleSize：Numberタイプ。デフォルト80。単一粒子サイズ。
lineas Color:Stringタイプです。黙認する。線の色。
ラインストーンWidth：Numberタイプ。デフォルト。線の幅。
ラインリンク:ブールタイプ。デフォルトtrue。接続線が使えますか？
ラインOpacity：Numberタイプ。デフォルト0.4。線の透過性
LINE Distance：Numberタイプ。デフォルト150。線の距離
moveSpeed：Numberタイプ。デフォルト3。粒子運動速度
ホーバーエフェクト:ブールタイプ。デフォルトtrue。ホバー効果がありますか？
hoverMode：Stringタイプ。デフォルトtrue。利用可能なhoverモードは、「grab」「repulse」「bubble」です。
clickEffect:ブールタイプ。デフォルトtrue。click効果がありますか？
clickMode：Stringタイプ。デフォルトtrue。利用できるclickモードは、「push」「remove」「repulse」「bubble」があります。
締め括りをつける
以上、小编で绍介したvueプロジェクトの中でparticlesを使って粒子の背景効果と遭遇した穴を実现しました。