欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-15 15:49:55
...

一、前言

在打开一个页面时候,如果遇到界面内容多或者接口请求慢导致加载速度慢时,这时候会导致页面出现较长时间的空白页面,影响用户的体验感,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

效果如下:
vue之vue-content-loader内容加载器使用

(2) CodeLoader

效果如下:
vue之vue-content-loader内容加载器使用

(3) BulletListLoader

效果如下:
vue之vue-content-loader内容加载器使用

(3) InstagramLoader

效果如下:
vue之vue-content-loader内容加载器使用

(4) ListLoader

效果如下:
vue之vue-content-loader内容加载器使用

(5) ContentLoader

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

默认情况下效果:

  <content-loader></content-loader>    

vue之vue-content-loader内容加载器使用
可以自定义自己的加载布局,比如一个移动端的首页界面如下:

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

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

2.相关api
Prop Type Default Description
width number 400
height number 130
speed number 2
preserveAspectRatio string 'xMidYMid meet'
primaryColor string '#f9f9f9'
secondaryColor string '#ecebeb'
uniqueKey string randomId() Unique ID, you need to make it consistent for SSR
animate boolean true
baseUrl string empty string Required if you're using <base url="/" /> in your <head />. Defaults to an empty string. This prop is common used as: <content-loader :base-url="$route.fullPath" /> which will fill the SVG attribute with the relative path. Related #14.
primaryOpacity number 1 Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari
secondaryOpacity number 1 Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari