Vue.js 的自适应骨架加载组件 - ue-loading-skeleton

Vue.js 的自适应骨架加载组件 - ue-loading-skeleton
插件名称 vue-loading-skeleton
发布时间 2022年2月24日
插件作者 kitwon

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

安装和下载:

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