Vue3はサイドナビゲーションテキストスケルトン効果コンポーネントをカプセル化します

Vue3はサイドナビゲーションテキストスケルトン効果コンポーネントをカプセル化します

Vue3プロジェクトのカプセル化サイドナビゲーションテキストスケルトン効果コンポーネント-グローバルカプセル化、参考までに、具体的な内容は次のとおりです。

目的

ページを表示するときに、一部のデータをバックグラウンドから読み込む必要があります。ネットワークの状態が良くない場合は、待機が必要になる場合があります。この場合、スケルトン レイヤーの点滅アニメーションを作成して、ユーザー エクスペリエンスを向上させることができます。

一般的な手順

- プレースホルダーとして機能するコンポーネントが必要です。このプレースホルダー コンポーネントには、専門用語で「スケルトン スクリーン コンポーネント」という用語が使われています。
いくつかのプロパティを公開します: 高さ、幅、背景、フラッシュ アニメーションがあるかどうか。

- これはグローバルに登録する必要があるパブリック コンポーネントです。将来的には、このようなコンポーネントを vue プラグインで定義することをお勧めします。

- コンポーネントを使用して、左側の分類スケルトン効果を完成させます。

着陸コード

1. 梱包部品

<テンプレート>
  <div class="skeleton" :style="{width,height}" :class="{shan:animated}">
    <!-- 1 ボックス -->
    <div class="block" :style="{backgroundColor:bg}"></div>
    <!-- 2 フラッシュ効果 xtx-skeleton 疑似要素--->
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'スケルトン'、
  // 使用する場合、高さ、幅、背景色、フラッシュするかどうかを動的に設定する必要があります。props: {
    背景: {
      タイプ: 文字列、
      デフォルト: '#efefef'
    },
    幅: {
      タイプ: 文字列、
      デフォルト: '100px'
    },
    身長:
      タイプ: 文字列、
      デフォルト: '100px'
    },
    アニメーション:
      タイプ: ブール値、
      デフォルト: false
    }
  }
}
</スクリプト>
<style スコープ lang="less">
.スケルトン{
  表示: インラインブロック;
  位置: 相対的;
  オーバーフロー: 非表示;
  垂直位置合わせ: 中央;
  。ブロック {
    幅: 100%;
    高さ: 100%;
    境界線の半径: 2px;
  }
}
.シャン
  &::後 {
    コンテンツ: "";
    位置: 絶対;
    アニメーション: shan 1.5 秒、ease 0 秒、無限;
    上: 0;
    幅: 50%;
    高さ: 100%;
    背景: 線形グラデーション(
      左へ、
      RGBA(255, 255, 255, 0) 0,
      RGBA(255, 255, 255, 0.3) 50%,
      RGBA(255, 255, 255, 0) 100%
    );
    変換: skewX(-45deg);
  }
}
@keyframes シャン {
  0% {
    左: -100%;
  }
  100% {
    左: 120%;
  }
}
</スタイル>

2. パッケージングプラグイン

// Vue のオリジナル機能を拡張します: グローバル コンポーネント、カスタム命令、プロトタイプ メソッドの実装、注意: グローバル フィルターはありません。
// これはプラグインです // Vue2.0 プラグインの記述要素: オブジェクトをエクスポートし、インストール関数を持ち、デフォルトで Vue コンストラクターを渡し、Vue に基づいて拡張します // Vue3.0 プラグインの記述要素: オブジェクトをエクスポートし、インストール関数を持ち、デフォルトでアプリ アプリケーション インスタンスを渡し、アプリに基づいて拡張します import Skeleton from './skeleton.vue'

エクスポートデフォルト{
  インストール(アプリ){
    // アプリを拡張します。アプリはコンポーネント ディレクティブ関数を提供します // プロトタイプをマウントする場合は、app.config.globalProperties メソッド app.component(Skeleton.name, Skeleton)
  }
}

3. エントリファイル main.js でのグローバル登録

'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
'./components/library' から MyUI をインポートします。

// プラグインを使用するには、main.js で app.use(plugin) を使用します
createApp(App).use(store).use(router).use(MyUI).mount('#app')

4. プロジェクトコンポーネント内のコンポーネントの使用

コンポーネントを使用する場合、スケルトン効果が必要な場所では相互に排他的なv-ifとv-elseが使用されます。

コンポーネントをカプセル化する場合、内部的にカスタムプロパティ props を通じて、幅、高さ、背景、アニメーションの 4 つのパラメータを受け取ります。コンポーネントを使用するときに、シーンの要件に応じて対応する値を渡すことができます。

コードは次のとおりです

<span v-else>
  <スケルトン width="60px" height="18px" style="margin-right:5px" bg="rgba(255,255,255,0.2)" :animated="true" />
  <スケルトン width="50px" height="18px" bg="rgba(255,255,255,0.2)" :animated="true" />
</span>

効果

要約する

1. スケルトンスクリーンセルコンポーネントをカプセル化する
2. Vueプラグインを設定し、グローバルコンポーネントを設定する
3. エントリファイルをインポートし、UIコンポーネントライブラリプラグインを構成する
4. スケルトン画面コンポーネントを使用してカテゴリリスト内の場所を占める

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • mpvueは左ナビゲーションと右コンテンツ間の連携を実現します
  • Vue+Vue Router マルチレベルサイドナビゲーション切り替えルーティング(ページ)実装コード

<<:  count(1)、count(*)、count(列名)の実行の違いの詳細な説明

>>:  Dockerコンテナ内にkibanaトークナイザーをインストールする方法

推薦する

MySQL トランザクション自動コミット自動コミット操作

MySQL のデフォルトの動作モードは自動コミット モードです。つまり、明示的にトランザクションを開...

MySQL の重要なパフォーマンス インデックスの計算と最適化方法の概要

1 QPS 計算 (1 秒あたりのクエリ数) MyISAMエンジンベースのDBの場合 MySQL&g...

この記事では、6つの負荷分散技術の実装方法をまとめます(要約)

ロード バランシングは、サーバー クラスタの展開でよく使用されるデバイスです。マシンのパフォーマンス...

カルーセル効果を実現するネイティブJavaScript

この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...

MySQL における between の境界と範囲の説明

境界範囲間のmysql間の範囲は両側の境界値を含む例: 3 から 7 までの id は、id >...

flex-grow、flex-shrink、flex-basis、9グリッドレイアウトを理解する

1. flex-grow、flex-shrink、flex-basis プロパティflex-grow...

JavaScriptにおけるこのポインティング問題の詳細な説明

序文信じてください。この記事の 7️⃣ ステップを覚えておけば、JS の this リファレンスを完...

ローカル画像サーバーのNginx構成の実装

目次1. Nginx の紹介2. 画像サーバーの構築1. Nginx の紹介Nginx はリバース ...

Mysql 8.0.18 ハッシュ結合テスト (推奨)

ハッシュ結合ハッシュ結合は実行にインデックスを必要とせず、ほとんどの場合、現在のブロックネストループ...

デザイン理論: デザインにおける階層

<br />原文: http://andymao.com/andy/post/80.ht...

CSSで検索ボックスを非表示にする機能を実装します(アニメーション順方向と逆方向のシーケンス)

上部のメニュー バーに検索ボックスを配置するのは一般的なシナリオですが、検索機能がそれほど頻繁に使用...

Docker プルタイムアウトの解決策

最近、Docker イメージのプルが非常に不安定です。遅く、タイムアウトすることがよくあります。 x...

クールな充電アニメーションを実現する純粋なCSS

CSS のみを使用してどのような充電アニメーション効果を作成できるかを見てみましょう。バッテリーを...