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
效果如下：
(2) CodeLoader
效果如下：
(3) BulletListLoader
效果如下：
(3) InstagramLoader
效果如下：
(4) ListLoader
效果如下：
(5) ContentLoader
ContentLoader是一个元加载程序，而其他加载程序只是它的高阶组件。默认情况下，ContentLoader只显示一个简单的矩形，同时你也可以自定义自己的加载器
默认情况下效果：
<content-loader></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>
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 |
推荐阅读