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

一、前言在打开一个页面时候，如果遇到界面内容多或者接口请求慢导致加载速度慢时，这时候会导致页面出现较长时间的空白页面，影响用户的体验感，vue-content-loader正是解决该场景问题的一个组件。二、特性1、完全可定制：你可以改变颜色，速度和大小2、创建自己的加载：使用在线工具轻松创建你的自定义加载3、你现在就可以使用它：已经有很多预设了4、性能Tree-shakable and highl

lss0555

2825人浏览 · 2020-09-27 11:03:19

lss0555 · 2020-09-27 11:03:19 发布

一、前言

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^