スケルトンスクリーンの使用
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 プログラムを書く
Dockerの場合すべてのコンテナコマンドを開始する docker を起動します $(docker ...
目次1. JavaScript がシングルスレッドなのはなぜですか? 2. タスクキュー3. イベン...
この記事では、セキュリティ、使用方法、同時処理などを通じて、MySQL トランザクションとデータの一...
目次1. はじめに: 2. ドッカー: 1 カスタムネットワーク2 展開を開始する3 ネットワークを...
IEでのRGBAとフィルター値の変換RGBA 透明度値IE フィルター値0.1 19 0.2 33 ...
目次1. データベース設計2. フロントエンドページ3. 完全なデモフロントエンド開発では、カスケー...
トムキャット公式サイトtomcatはローカルサーバーと同等であり、Webページを開くことができます設...
この記事では、CentOS 7.4 サーバーで時刻同期を構成する方法について説明します。ご参考までに...
反復/egrep構文: grep [-cinvABC] 'word' ファイル名-c...
表では、左上の境界線の色を個別に定義したり、セルの右下の境界線の色を定義したりできます。これら 2 ...
データベース接続のURLの詳細な説明と概要JDBC URL = プロトコル名 + サブプロトコル名 ...
JSON 文字列を JSON オブジェクトに変換するにはどうすればいいですか? JSON.parse...
Nginx の共有メモリは、高いパフォーマンスを実現できる主な理由の 1 つであり、主にファイル キ...
MySQL で判断文を書く方法:方法1. CASE関数case関数の構文: CASE条件 値1の場合...
このとき、overflow:auto;(コードがコンテナの境界を超えたときにスクロールボックスを表示...