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トークナイザーをインストールする方法

推薦する

CentOS7 での PostgreSQL 11 の詳細なインストールと設定のチュートリアル

1. 公式ウェブサイトアドレス公式サイトではインストールの参考手順が紹介されています。公式サイトを見...

ウェブタイポグラフィにおける致命的な意味的ミス 10 選

<br />これは、Steven D が書いた Web フロントエンド開発デザインの基本...

アイデアコンパイラvueインデントエラー問題シナリオの分析

プロジェクトシナリオ: Vueプロジェクトを実行したらインデントエラーが出ました。ideaコンパイラ...

プロセスのすべての情報を表示するLinuxメソッドの例

サーバー上にタスク プロセスがあります。 ps -ef | grep task を使用して表示すると...

ウェブデザインにおけるポップアップウィンドウとフローティングレイヤーのデザイン

従来のソフトウェアから Web ウェアへの段階的な移行の傾向の中で、デザイン パターンとテクノロジは...

WeChatアプレットの入力レベルとテキストエリアレベルの浸透率が高すぎる問題の解決策

WeChat ミニプログラムのネイティブ コンポーネントであるカメラ、キャンバス、入力 (フォーカス...

MySQLの基礎知識学習ノート

データベースを表示show databases;データベースを作成するDATABASE データベース...

MySQL 学習ノート: データ エンジン

現在のデータベースでサポートされているエンジンを表示します エンジンを表示 +-----------...

Tencent インタビュー: SQL ステートメントの実行が非常に遅くなる理由は何ですか? ---後悔シリーズは見ないで(推奨)

正直に言うと、この質問には MySQL のコア知識がかなり必要で、コンピュータ ネットワークの知識を...

CentOS 8.0.1905 は ZABBIX 4.4 バージョンをインストールします (検証済み)

Zabbix サーバー環境プラットフォームバージョン: ZABBIX バージョン 4.4システム:...

MYSQLパターンマッチングREGEXPの使用に関する一般的な話など

のようにLIKE ではデータ全体が一致する必要がありますが、REGEXP では部分的な一致のみが必要...

RHEL8 で静的 IP アドレスを設定するさまざまな方法の簡単な分析

Linux サーバーで作業している場合、ネットワーク カード/イーサネット カードに静的 IP アド...

Linux サーバーが処理できる接続数をご存知ですか?

序文まず、TCP 接続を識別する方法を見てみましょう。システムは、(src_ip、src_port、...

Bash の山括弧の深い理解 (初心者向け)

序文Bash には、ls、cd、mv などの重要な組み込みコマンドが多数あるほか、grep、awk、...

nginx で同時接続リクエストの数を制限する方法

導入同時接続数を制限するモジュールは http_limit_conn_module です。アドレス:...