Vue3はサイドナビゲーションテキストスケルトン効果コンポーネントをカプセル化します

<テンプレート>
  <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%;
  }
}
</スタイル>

// Vue のオリジナル機能を拡張します: グローバル コンポーネント、カスタム命令、プロトタイプ メソッドの実装、注意: グローバル フィルターはありません。
// これはプラグインです // Vue2.0 プラグインの記述要素: オブジェクトをエクスポートし、インストール関数を持ち、デフォルトで Vue コンストラクターを渡し、Vue に基づいて拡張します // Vue3.0 プラグインの記述要素: オブジェクトをエクスポートし、インストール関数を持ち、デフォルトでアプリ アプリケーション インスタンスを渡し、アプリに基づいて拡張します import Skeleton from './skeleton.vue'

エクスポートデフォルト{
  インストール（アプリ）{
    // アプリを拡張します。アプリはコンポーネント ディレクティブ関数を提供します // プロトタイプをマウントする場合は、app.config.globalProperties メソッド app.component(Skeleton.name, Skeleton)
  }
}

'vue' から {createApp} をインポートします。
'./App.vue' からアプリをインポートします。
'./components/library' から MyUI をインポートします。

// プラグインを使用するには、main.js で app.use(plugin) を使用します
createApp(App).use(store).use(router).use(MyUI).mount('#app')

<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>