vue之vue-content-loader内容加载器使用

小灰灰 2022-12-10 15:00 209阅读 0赞

#### 一、前言 ####

在打开一个页面时候，如果遇到界面内容多或者接口请求慢导致加载速度慢时，这时候会导致页面出现较长时间的空白页面，影响用户的体验感，vue-content-loader正是解决该场景问题的一个组件。

#### 二、特性 ####

1、完全可定制：你可以改变颜色，速度和大小  
2、创建自己的加载：使用在线工具轻松创建你的自定义加载  
3、你现在就可以使用它：已经有很多预设了  
4、性能

*  Tree-shakable and highly optimized bundle
 *  纯SVG, 因此它不需要任何 javascript, canvas,等
 *  纯功能部件

#### 三、使用 ####

##### 1.引入 #####

当前版本0.2.3

npm i vue-content-loader

npm组件库地址：https://www.npmjs.com/package/vue-content-loader

##### 1.使用 #####

<template>
      <content-loader></content-loader>
    </template>
     
    <script>
    import {  ContentLoader } from 'vue-content-loader'
     
    export default { 
      components: { 
        ContentLoader
      }
    }
    </script>
    
    import { 
      ContentLoader,
      FacebookLoader,
      CodeLoader,
      BulletListLoader,
      InstagramLoader,
      ListLoader
    } from 'vue-content-loader'

###### (1) FacebookLoader ######

效果如下：  
![在这里插入图片描述][20200927103755162.gif_pic_center]

###### (2) CodeLoader ######

效果如下：  
![在这里插入图片描述][20200927103855996.gif_pic_center]

###### (3) BulletListLoader ######

效果如下：  
![在这里插入图片描述][20200927103943934.gif_pic_center]

###### (3) InstagramLoader ######

效果如下：  
![在这里插入图片描述][20200927104034999.gif_pic_center]

###### (4) ListLoader ######

效果如下：  
![在这里插入图片描述][20200927104116627.gif_pic_center]

###### (5) ContentLoader ######

ContentLoader是一个元加载程序，而其他加载程序只是它的高阶组件。默认情况下，ContentLoader只显示一个简单的矩形，同时你也可以自定义自己的加载器

默认情况下效果：

<content-loader></content-loader>

![在这里插入图片描述][20200927104638265.gif_pic_center]  
可以自定义自己的加载布局，比如一个移动端的首页界面如下:

<content-loader
          :width="414"
          :height="836"
          :speed="1"
          primaryColor="#f3f3f3"
          secondaryColor="#ecebeb"
        >
          <rect x="6" y="10" rx="5" ry="5" width="100" height="20" />
          <rect x="11" y="54" rx="0" ry="0" width="384" height="110" />
          <rect x="7" y="176" rx="0" ry="0" width="400" height="125" />
          <rect x="320" y="235" rx="0" ry="0" width="24" height="0" />
          <rect x="123" y="17" rx="0" ry="0" width="274" height="20" />
          <circle cx="36" cy="329" r="15" />
          <rect x="13" y="352" rx="0" ry="0" width="51" height="5" />
          <circle cx="124" cy="329" r="15" />
          <rect x="101" y="352" rx="0" ry="0" width="51" height="5" />
          <circle cx="211" cy="329" r="15" />
          <rect x="184" y="352" rx="0" ry="0" width="51" height="5" />
          <circle cx="289" cy="329" r="15" />
          <rect x="263" y="352" rx="0" ry="0" width="51" height="5" />
          <circle cx="371" cy="329" r="15" />
          <rect x="345" y="352" rx="0" ry="0" width="51" height="5" />
          <circle cx="37" cy="394" r="15" />
          <rect x="11" y="423" rx="0" ry="0" width="51" height="5" />
          <circle cx="126" cy="394" r="15" />
          <rect x="101" y="423" rx="0" ry="0" width="51" height="5" />
          <circle cx="213" cy="394" r="15" />
          <rect x="195" y="424" rx="0" ry="0" width="52" height="0" />
          <rect x="187" y="423" rx="0" ry="0" width="51" height="5" />
          <circle cx="288" cy="394" r="15" />
          <rect x="263" y="423" rx="0" ry="0" width="51" height="5" />
          <circle cx="371" cy="394" r="15" />
          <rect x="13" y="443" rx="0" ry="0" width="357" height="76" />
          <rect x="56" y="537" rx="0" ry="0" width="103" height="60" />
          <rect x="224" y="537" rx="0" ry="0" width="103" height="60" />
          <rect x="59" y="606" rx="0" ry="0" width="100" height="5" />
          <rect x="59" y="616" rx="0" ry="0" width="100" height="5" />
          <rect x="59" y="627" rx="0" ry="0" width="100" height="5" />
          <rect x="225" y="607" rx="0" ry="0" width="100" height="5" />
          <rect x="227" y="618" rx="0" ry="0" width="100" height="5" />
          <rect x="227" y="627" rx="0" ry="0" width="100" height="5" />
        </content-loader>

![在这里插入图片描述][20200927105250287.gif_pic_center]

##### 2.相关api #####

<table> 
 <thead> 
  <tr> 
   <th>Prop</th> 
   <th>Type</th> 
   <th>Default</th> 
   <th>Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width</td> 
   <td>number</td> 
   <td><code>400</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>number</td> 
   <td><code>130</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>speed</td> 
   <td>number</td> 
   <td><code>2</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>preserveAspectRatio</td> 
   <td>string</td> 
   <td><code>'xMidYMid meet'</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>primaryColor</td> 
   <td>string</td> 
   <td><code>'#f9f9f9'</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>secondaryColor</td> 
   <td>string</td> 
   <td><code>'#ecebeb'</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>uniqueKey</td> 
   <td>string</td> 
   <td><code>randomId()</code></td> 
   <td>Unique ID, you need to make it consistent for SSR</td> 
  </tr> 
  <tr> 
   <td>animate</td> 
   <td>boolean</td> 
   <td><code>true</code></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>baseUrl</td> 
   <td>string</td> 
   <td>empty string</td> 
   <td>Required if you're using <code>&lt;base url="/" /&gt;</code> in your <code>&lt;head /&gt;</code>. Defaults to an empty string. This prop is common used as: <code>&lt;content-loader :base-url="$route.fullPath" /&gt;</code> which will fill the SVG attribute with the relative path. Related <a href="https://github.com/egoist/vue-content-loader/issues/14" rel="nofollow">#14</a>.</td> 
  </tr> 
  <tr> 
   <td>primaryOpacity</td> 
   <td>number</td> 
   <td><code>1</code></td> 
   <td>Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari</td> 
  </tr> 
  <tr> 
   <td>secondaryOpacity</td> 
   <td>number</td> 
   <td><code>1</code></td> 
   <td>Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari</td> 
  </tr> 
 </tbody> 
</table>

[20200927103755162.gif_pic_center]: /images/20221123/a12ec39c4ec94515bf07949d78cc22a4.png
[20200927103855996.gif_pic_center]: /images/20221123/53951843678e48079006ec5471c22a62.png
[20200927103943934.gif_pic_center]: /images/20221123/f73d1c24b2d04f1b83093c2ab879b53e.png
[20200927104034999.gif_pic_center]: /images/20221123/8ad53712c17c4894ac47a91b26385fe3.png
[20200927104116627.gif_pic_center]: /images/20221123/1865be59ef8142c7b1e882bcd6bea13d.png
[20200927104638265.gif_pic_center]: /images/20221123/1c53526b8c1d467093b6d75570b95fcd.png
[20200927105250287.gif_pic_center]: /images/20221123/64c73239305143b2ab7d863f176e8f14.png