一个轻量级且可主题化的骨架加载器组件，可自动适应您的应用程序内容。

安装和下载：

# Yarn$ yarn add vue-loading-skeleton# NPM$ npm install vue-loading-skeleton --save

使用：

1.安装和导入。

import Skeleton from 'vue-loading-skeleton';

2. 将您的内容包装在骨架加载器组件中。

<div class="item">
  <div class="item__photo">
    <PuSkeleton circle height="50px">
      {{ props.data.img }}
    </PuSkeleton>
  </div>
  <div class="item__meta">
    <div class="item__title">
      <PuSkeleton>{{ props.data.title }}</PuSkeleton>
    </div>
    <div class="item__info">
      <PuSkeleton :count="2">{{ props.data.body }}</PuSkeleton>
    </div>
  </div>
</div>

3.可用道具。

prefix: {
  type: String,
  default: 'pu'
},
count: {
  type: Number,
  default: 1
},
duration: {
  type: Number,
  default: 1.5
},
tag: {
  type: String,
  default: 'span'
},
width: [String, Number],
height: [String, Number],
circle: Boolean,
loading: undefined&gt

4.可用的主题道具。

color: {
  type: String,
  default: DEFAULT_BACKGROUND
},
highlight: {
  type: String,
  default: DEFAULT_HIGHLIGHT
},
duration: {
  type: Number,
  default: 1.5
},
tag: {
  type: String,
  default: 'div'
},
loading: {
  type: Boolean,
  default: undefined
}