スケルトンスクリーンの使用
Vueアーキテクチャスケルトンスクリーンアイデアの概要
抽象コンポーネントの定義抽象コンポーネントとは何ですか? レンダリング中にスキップされ、実行時操作のみを実行するコンポーネントです。 エクスポートデフォルト{ 名前: 'GmSkeleton'、 abstract: true // 抽象コンポーネントのプロパティ} スロットを取得し、操作スケルトン画面を初期化するレンダリング(h) { const スロット = this.$slots.default || [h('')] this.$nextTick().then(() => { this.handlerPrefix(スロット、this.showSpin ? this.addSkeletPrefix : this.removeSkeletPrefix) }) スロットの長さが1より大きい場合、h('div', { 静的クラス: this.showSpin ? 'g-spinner' : '' }, スロット) : スロット } ここでは、handlerPrefix が実際の DOM を取得する必要があるため、スロット処理メソッドを nextTick に配置します。NextTick は、ソートされた更新キュー内のすべてのメソッドを実行するために使用されます。レンダリングを実行する前に、GMSkeleton コンポーネントの renderWatcher が更新キューに収集されています。そのため、nextTick CallBack 関数は、レンダリング後に対応するスロット内のすべての実際の DOM を取得できます。nextTick の原理がわからない場合は、nextTick についてわからないことを参照してください。 サイクルスロット操作クラス名handlerComponent(スロット、handler/* addSkeletPrefix | removeSkeletPrefix */、init) { const originchildren = (((slot.componentInstance || {})._vnode || {}).componentOptions || {}).children const compchildren = ((slot.componentInstance || {})._vnode || {}).children !init && ハンドラ(スロット) if (compchildren) this.handlerPrefix(compchildren, handler, false) if (originchildren) this.handlerPrefix(originchildren, handler, false) }, handlerPrefix(スロット、ハンドラー、init = true) { スロット.forEach(スロット => { var children = slot.children || (slot.componentOptions || {}).children || ((slot.componentInstance || {})._vnode || {}).children if (スロットデータ) { スロットコンポーネントオプションの場合 !init && ハンドラ(スロット) } そうでない場合 (!this.$hoc_utils.getAbstractComponent(スロット)) { ;(関数(スロット) { const handlerComponent = this.handlerComponent.bind(this, slot, handler, init) const 挿入 = (slot.data.hook || {}).挿入 ;(slot.data.hook || {}).insert = () => { // 関数のリファクタリング、元のコンポーネントフックを変更し、挿入が 1 回だけ実行されるようにします insert(slot) ハンドラコンポーネント() } ;(slot.data.hook || {}).postpatch = handlerComponent }).call(this, スロット) } } (スロット&& slot.elm && slot.elm.nodeType === 3)の場合{ if (this.showSpin) { slot.memorizedtextContent = slot.elm.textContent slot.elm.textContent = '' } それ以外 { slot.elm.textContent = slot.memorizedtextContent || slot.elm.textContent || slot.text } } children && this.handlerPrefix(children, handler, false) }) }, ステップバイステップの分析:
vnodeを操作するための静的クラス名addSkeletPrefix(スロット) { const rootVnode = slot.componentOptions ? (slot.componentInstance || {})._vnode || {} : スロット; (ルートノード.elm)の場合{ rootVnode.elm.classList.add(this.skeletPrefix) } それ以外 { ;(rootVnode.data || {}).staticClass += ` ${this.skeletPrefix}` } }, スケルトンプレフィックスを削除します(スロット) { const rootVnode = slot.componentOptions ? (slot.componentInstance || {})._vnode || {} : スロット; (ルートノード.elm)の場合{ rootVnode.elm.classList && rootVnode.elm.classList.remove(this.skeletPrefix) } そうでない場合 (rootVnode.data.staticClass) { rootVnode.data.staticClass = rootVnode.data.staticClass.replace(` ${this.skeletPrefix}`, '') } } addSkeletePrefixはgm-skeletonクラス名を追加するために使用され、removeSkeletonPrefixはgm-skeletonクラス名を削除するために使用されます。 使い方'vue' から Vue をインポートします 'path/to/GMSkeleton' から GMSkeleton をインポートします Vue.use(GMSkeleton) <gm-スケルトン> <コンポーネント /> <div></div> <div><span>フロントエンド マーティン</span></div> </gm-スケルトン> 値の受け渡し
効果は以下のとおりです特定のスタイルは、開発者が書いたスタイルに従って生成され、上記のようにgm-skeletonでラップされます。以下は簡単な例です。 完全な住所Vue スケルトン スクリーンを実装するための 80 行のコード 以上がvueでスケルトン画面を実装した例の詳細です。vueでスケルトン画面を実装する方法の詳細については、123WORDPRESS.COMの他の関連記事にも注目してください! 以下もご興味があるかもしれません:
|
<<: MySQL 5.7.20 の解凍バージョンをインストールするための詳細な手順 (2 つの方法)
>>: Linux で Scala 環境を構築し、簡単な Scala プログラムを書く
2つのケース: 1. 索引あり 2. 索引なし前提条件:方法: コマンドラインを使用してシミュレート...
まず、画像を見てみましょう。今日はこのエフェクトを作成します。 実は、何でもないんです。Web ペー...
序文CSS を使用して点線を生成するのは、フロントエンド開発者にとっては簡単です。一般的に、これを実...
CSS3 構文: (750 ピクセルのデザインの場合、1rem = 100 ピクセル) @media...
1. docker imagesを使用して、このマシン上のすべてのイメージファイルを表示します。 2...
Docker を使用して MySQL イメージをプルしようとして 30 分経っても失敗したため、代わ...
innobackupex を使用してバックアップする際に MySQL がサーバーに接続できない場合は...
ネットワークが分離されているため、MySQL は yum を使用してインストールできません。ここでは...
目次JS スリーマウンテンズ同期 非同期同期と非同期の違い範囲、終了関数スコープチェーンブロックスコ...
あなたがlinuxerだと仮定すると、 windowserだとは想定しません。Windows ユーザ...
導入された HTML タグは、必ずしも XHTML 仕様に完全に準拠しているわけではありません。実際...
前面に書かれたコードがどれだけ適切に記述されていても、すべての可能性のある例外を完全に処理することは...
この記事では、WeChatアプレットでジグソーパズルゲームを実装するための具体的なコードを参考までに...
自分のウェブサイトを構築する予定なので、618 プロモーションを利用して Tencent Cloud...
目次複数テーブル結合の基本構文クロス結合と直積現象クロスコネクトデカルト積現象内部結合外部結合左外部...