一、前言

在打开一个页面时候，如果遇到界面内容多或者接口请求慢导致加载速度慢时，这时候会导致页面出现较长时间的空白页面，影响用户的体验感，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
PropTypeDefaultDescription
widthnumber400
heightnumber130
speednumber2
preserveAspectRatiostring'xMidYMid meet'
primaryColorstring'#f9f9f9'
secondaryColorstring'#ecebeb'
uniqueKeystringrandomId()Unique ID, you need to make it consistent for SSR
animatebooleantrue
baseUrlstringempty stringRequired 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.
primaryOpacitynumber1Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari
secondaryOpacitynumber1Background opacity (0 = transparent, 1 = opaque) used to solve an issue in Safari
Logo
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}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue