Vue ログインページ用の動的パーティクル背景プラグインの実装

動的パーティクル効果は次のとおりです。

ここに画像の説明を挿入

プラグインをインストールする

npm インストール vue-particles --save-dev

main.js ファイルにグローバルにインポートする

'vue-particles' から VueParticles をインポートします。  
Vue.use(VueParticles)

vueファイルで使用する

 <vue-パーティクル
          カラー="#409EFF"
          :particleOpacity="0.7"
          :粒子数="60"
          形状タイプ="円"
          :粒子サイズ="6"
          ラインカラー="#409EFF"
          :行幅="1"
          :lineLinked="true"
          :line不透明度="0.4"
          :線の距離="150"
          :moveSpeed="3"
          :hoverEffect="true"
          hoverMode="つかむ"
          :clickEffect="true"
          クリックモード="プッシュ">
</vue-パーティクル>

背景画像として動的パーティクルを使用します。新しい div を表示する必要がある場合、div は vue-particles コンテンツをカバーすることができないため、後で順番に表示されることがわかります。そのため、 position:absoluteが追加され、新しいdivボックスがある場合はposition:relativeに設定されます。

<スタイル>
#パーティクルjs {
  幅: 100%;
  高さ: calc(100% - 100px);
  位置: 絶対;
}
</スタイル>

ここに画像の説明を挿入

上記の属性について:

vue-particlesのプロパティ:
color: 文字列型。デフォルトは「#dedede」です。粒子の色。
粒子不透明度: 数値型。デフォルトは 0.7 です。粒子の透明度。
particlesNumber: 数値型。デフォルト値は 80 です。粒子の数。
shapeType: 文字列型。デフォルトは「circle」です。使用可能なパーティクルの外観タイプは、「円」、「エッジ」、「三角形」、「多角形」、「星」です。
particlesSize: 数値型。デフォルト値は 80 です。個々の粒子のサイズ。
linesColor: 文字列型。デフォルトは「#dedede」です。線の色。
linesWidth: 数値型。デフォルトは1です。線の幅。
lineLinked: ブール型。デフォルトは true です。接続ケーブルは入手可能ですか?
lineOpacity: 数値型。デフォルトは 0.4 です。線の透明度。
linesDistance: 数値型。デフォルトは150です。線の距離。
moveSpeed: 数値型。デフォルトは 3 です。粒子の移動速度。
hoverEffect: ブール型。デフォルトは true です。ホバー効果があるかどうか。
hoverMode: 文字列型。デフォルトは true です。使用可能なホバーモードは、「つかむ」、「撃退する」、「バブル」です。
clickEffect: ブール型。デフォルトは true です。クリック効果があるかどうか。
clickMode: 文字列型。デフォルトは true です。利用可能なクリックモードは、「プッシュ」、「削除」、「反発」、「バブル」です。

Vue ログインページ用の動的パーティクル背景プラグインの実装に関するこの記事はこれで終わりです。Vue 動的パーティクル背景の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: