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. スケルトンスクリーンセルコンポーネントをカプセル化する 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: count(1)、count(*)、count(列名)の実行の違いの詳細な説明
>>: Dockerコンテナ内にkibanaトークナイザーをインストールする方法
1. 公式ウェブサイトアドレス公式サイトではインストールの参考手順が紹介されています。公式サイトを見...
<br />これは、Steven D が書いた Web フロントエンド開発デザインの基本...
プロジェクトシナリオ: Vueプロジェクトを実行したらインデントエラーが出ました。ideaコンパイラ...
サーバー上にタスク プロセスがあります。 ps -ef | grep task を使用して表示すると...
従来のソフトウェアから Web ウェアへの段階的な移行の傾向の中で、デザイン パターンとテクノロジは...
WeChat ミニプログラムのネイティブ コンポーネントであるカメラ、キャンバス、入力 (フォーカス...
データベースを表示show databases;データベースを作成するDATABASE データベース...
現在のデータベースでサポートされているエンジンを表示します エンジンを表示 +-----------...
正直に言うと、この質問には MySQL のコア知識がかなり必要で、コンピュータ ネットワークの知識を...
Zabbix サーバー環境プラットフォームバージョン: ZABBIX バージョン 4.4システム:...
のようにLIKE ではデータ全体が一致する必要がありますが、REGEXP では部分的な一致のみが必要...
Linux サーバーで作業している場合、ネットワーク カード/イーサネット カードに静的 IP アド...
序文まず、TCP 接続を識別する方法を見てみましょう。システムは、(src_ip、src_port、...
序文Bash には、ls、cd、mv などの重要な組み込みコマンドが多数あるほか、grep、awk、...
導入同時接続数を制限するモジュールは http_limit_conn_module です。アドレス:...