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トークナイザーをインストールする方法
MySQL のデフォルトの動作モードは自動コミット モードです。つまり、明示的にトランザクションを開...
1 QPS 計算 (1 秒あたりのクエリ数) MyISAMエンジンベースのDBの場合 MySQL&g...
前提条件: content="width=750" <meta name=...
ビジネス シナリオ: vue + element ui の el-dialog を使用します。ポップ...
ロード バランシングは、サーバー クラスタの展開でよく使用されるデバイスです。マシンのパフォーマンス...
この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...
境界範囲間のmysql間の範囲は両側の境界値を含む例: 3 から 7 までの id は、id >...
1. flex-grow、flex-shrink、flex-basis プロパティflex-grow...
序文信じてください。この記事の 7️⃣ ステップを覚えておけば、JS の this リファレンスを完...
目次1. Nginx の紹介2. 画像サーバーの構築1. Nginx の紹介Nginx はリバース ...
ハッシュ結合ハッシュ結合は実行にインデックスを必要とせず、ほとんどの場合、現在のブロックネストループ...
<br />原文: http://andymao.com/andy/post/80.ht...
上部のメニュー バーに検索ボックスを配置するのは一般的なシナリオですが、検索機能がそれほど頻繁に使用...
最近、Docker イメージのプルが非常に不安定です。遅く、タイムアウトすることがよくあります。 x...
CSS のみを使用してどのような充電アニメーション効果を作成できるかを見てみましょう。バッテリーを...