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' : ''
      }, スロット) : スロット
    }

    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)
      })
    },

    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}`, '')
      }
    }

  'vue' から Vue をインポートします
  'path/to/GMSkeleton' から GMSkeleton をインポートします
  
  Vue.use(GMSkeleton)

  <gm-スケルトン>
    <コンポーネント />
    <div></div>
    <div><span>フロントエンド マーティン</span></div>
  </gm-スケルトン>