開発者ドキュメント

vue-content-loaderを使用したVue.jsでのコンテンツプレースホルダーの表示

まだ気付いていないかもしれませんが、いくつかの主要なアプリは、無期限の読み込みサークルインジケーターパラダイムから移行しています(たとえば、5倍高速です)。 なんで? 何もないよりはましですが、それでもユーザーはコンテンツが読み込まれるのを待ちきれません。 では、代わりに何を使用しますか? プレースホルダーを読み込んでいます。 それらは通常、意図されたコンテンツのおおよその形をした低コントラストのブロックであり、アニメーション化されることもあります。 Slack、Instagram、さらにはFacebookでそのような要素に気づいたことでしょう。 自分で作成する方法のガイドを作成しましたが、そのような要素を提供できる優れたVue.jsコンポーネントがあります。 vue-content-loader.

依存関係

このガイドは、Vue.jsプロジェクトがすでに設定されていることを前提としています。 そうでない場合は、先に進み、 vue-cli3.0とデフォルトのオプションを使用して新しいVueプロジェクトを開始します。 ランニング $ vue create my-new-project Enterキーを数回押すだけで十分です。

次に、インストールします vue-content-loader npmから:

$ npm install vue-content-loader

注:これはプラグインではなくコンポーネントであるため、で何も有効にする必要はありません。 main.js ここ。

使用法

<template>
<div class="content-wrapper">
    <!-- Displays if myData is not set.
    Options
    speed: Number - How many seconds between pulses of the loader.
    height / width: Number - size of the loader contents.
    primaryColor: String - The color of the elements.
    secondaryColor: String - The color of the pulser.
    animate: Boolean - Whether or not to display the pulser.
    -->
    <content-loader v-if="!myData"
      :speed="2"
      :animate="true"
    ></content-loader>
    <div v-else class="my-real-content">
      <!-- Your real loaded data goes in here. -->
      <p>{{myData}}</p>
    </div>
  </div>
</template>

<script>
import { ContentLoader } from 'vue-content-loader';

export default {
  components: {
    ContentLoader
  },

  data() {
    return {
      myData: null
    }
  },

  mounted() {
    // Just pretend this is an AJAX call. Use your imagination.
    setTimeout(() => {
      this.myData = 'Example Data';
    }, 5000);
  }
}
</script>

まあ、それは圧倒的です。 ほんの少し退屈な正方形。 :/ ContentLoader コンポーネントは、実際には独自のカスタムローダーSVG要素のラッパーであると想定されています。 何?!あなたは悲鳴を上げます。 コンテンツローダー用に自分のSVGSを作成する必要がありますか?

うーん、はい! あなたのためにコードを生成する豪華なオンラインGUIツールがあります! 悪くない、全く!

これが私がその発電機を使って作ったかわいい小さな車の形をしたものです:(ワニを作ろうとしましたが、必要なスキルと細かい運動制御が不足しています)。

<content-loader>
  <circle cx="333.40099117860757" cy="371.67099117860755" r="45.40099117860754"/>
  <circle cx="132.26035793053342" cy="377.5303579305334" r="45.260357930533424"/>
  <circle cx="289.53897688809354" cy="305.8089768880935" r="54.53897688809353"/>
  <rect x="80.04" y="312.09" rx="0" ry="0" width="324" height="66" transform="rotate(0.06, 80.04, 312.09)"/>
  <circle cx="163.7954915950234" cy="303.06549159502345" r="48.79549159502341"/>
  <rect x="159.7" y="255.09" rx="0" ry="0" width="131" height="64" transform="rotate(357.56, 159.7, 255.09)"/>
</content-loader>

まだ努力が多すぎますか? vue-content-loader 次のような多くの組み込みスタイルが付属しています。

フェイスブック

銃弾

コード

リスト

インスタグラム

これらは、から直接インポートするだけで使用できます。 vue-content-loader の代わりにそれらを使用します content-loader 成分:

<template>
<div class="content-wrapper">
  <!-- Displays if myData is not set. -->
  <facebook-loader v-if="!myData"
    :speed="2"
  ></facebook-loader>
  <div v-else class="my-real-content">
    <!-- Your real loaded data goes in here. -->
    <p>{{myData}}</p>
  </div>
</div>
</template>

<script>
import { FacebookLoader } from 'vue-content-loader';
// Or: InstagramLoader | CodeLoader | ListLoader | BulletListLoader

export default {
  components: {
    FacebookLoader
  },

  data() {
    return {
      myData: null
    }
  },

  mounted() {
    // Just pretend this is an AJAX call. Use your imagination.
    setTimeout(() => {
      this.myData = 'Example Data';
    }, 5000);
  }
}
</script>
モバイルバージョンを終了