使用 vue-content-loader 在 Vue.js 中显示内容占位符

你可能还没有注意到,但几个主要的应用程序正在从无限的加载圈指标范式中迁移(说是五倍快)。为什么? 因为,虽然它比什么都好,但它仍然让用户感到不耐烦地等待他们的内容加载,所以他们使用的是什么? 加载位置持有者. 它们通常是具有预期内容的近似形状的低对比块,有时动画。您可能在Slack,Instagram或甚至Facebook上注意到过这样的元素! 我们写了(https://andsky.com/tech/tutorials/vuejs-vue-placeholders),但有一个伟大的Vue.js组件可以为您提供这样的元素: vue-content-loader。

依赖性

本指南假定您已经设置了 Vue.js 项目,否则继续使用 vue-cli 3.0和默认选项启动新的 Vue 项目。

接下来,从 npm 安装vue-content-loader:

1$ npm install vue-content-loader

注意:这是一个组件,而不是一个插件,所以我们不需要在这里在main.js中启用任何内容。

使用

 1<template>
 2<div class="content-wrapper">
 3    <!-- Displays if myData is not set.
 4    Options
 5    speed: Number - How many seconds between pulses of the loader.
 6    height / width: Number - size of the loader contents.
 7    primaryColor: String - The color of the elements.
 8    secondaryColor: String - The color of the pulser.
 9    animate: Boolean - Whether or not to display the pulser.
10    -->
11    <content-loader v-if="!myData"
12      :speed="2"
13      :animate="true"
14    ></content-loader>
15    <div v-else class="my-real-content">
16      <!-- Your real loaded data goes in here. -->
17      <p>{{myData}}</p>
18    </div>
19  </div>
20</template>
21
22<script>
23import { ContentLoader } from 'vue-content-loader';
24
25export default {
26  components: {
27    ContentLoader
28  },
29
30  data() {
31    return {
32      myData: null
33    }
34  },
35
36  mounted() {
37    // Just pretend this is an AJAX call. Use your imagination.
38    setTimeout(() => {
39      this.myData = 'Example Data';
40    }, 5000);
41  }
42}
43</script>

好吧,这是压倒性的. 只是一个有点无聊的方块. :/ 内容加载器的组件实际上应该是您自己的自定义加载器 SVG 元素的包装器。

Umm,是的!有一个精彩的在线GUI工具将为您生成代码! 根本不坏!

下面是我用那台发电机制作的可爱的小型车型:(我试图制作一只,但我缺乏必要的技能和精细的发动机控制。

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

vue-content-loader配备了多种内置风格,包括:

◎ Facebook ◎

《子弹》

代码 *

名单 *

【Instagram】

这些可以通过直接从vue-content-loader导入,并使用它们来代替content-loader组件来使用:

 1<template>
 2<div class="content-wrapper">
 3  <!-- Displays if myData is not set. -->
 4  <facebook-loader v-if="!myData"
 5    :speed="2"
 6  ></facebook-loader>
 7  <div v-else class="my-real-content">
 8    <!-- Your real loaded data goes in here. -->
 9    <p>{{myData}}</p>
10  </div>
11</div>
12</template>
13
14<script>
15import { FacebookLoader } from 'vue-content-loader';
16// Or: InstagramLoader | CodeLoader | ListLoader | BulletListLoader
17
18export default {
19  components: {
20    FacebookLoader
21  },
22
23  data() {
24    return {
25      myData: null
26    }
27  },
28
29  mounted() {
30    // Just pretend this is an AJAX call. Use your imagination.
31    setTimeout(() => {
32      this.myData = 'Example Data';
33    }, 5000);
34  }
35}
36</script>