vue 构建的 ant design 风格骨架屏组件
简单来讲，骨架屏就是优化版的 loading 示意图。
如图所示，上面三者分别是骨架屏、菊花图、空白页。
可以看到骨架屏能够将页面的大致结构描绘出来，其体验要比菊花图好上太多。
骨架屏已经在易通行、支付宝、饿了么、知乎、淘宝等众多 APP 或网站中广泛使用，你还在等什么，快快用起来吧！
- 安装
使用 npm 安装
npm i vue-skeleton-antd或使用 yarn 安装
yarn add vue-skeleton-antd- 引入组件
import Vue from 'vue';
import vueSkeleton from 'vue-skeleton-antd';
Vue.use(vueSkeleton)| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
active |
是否展示动画效果 | boolean | false |
avatar |
是否显示头像占位图 | boolean 或 object | false |
paragraph |
是否显示段落占位图 | boolean 或 object | true |
title |
是否显示标题占位图 | boolean 或 object | true |
loading |
为 true 时，显示占位图。反之则直接展示子组件 |
boolean | true |
头像参数 avatar 除了可以设置布尔值之外，还可以是 Object。如果是 Object，则允许拥有以下属性。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
shape |
指定头像的形状 | Enum{ 'circle', 'square' } | circle |
标题参数 avatar 除了可以设置布尔值之外，还可以是 Object。如果是 Object，则允许拥有以下属性。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
width |
设置标题占位图的宽度 | string | 50% |
段落参数 avatar 除了可以设置布尔值之外，还可以是 Object。如果是 Object，则允许拥有以下属性。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
rows |
设置段落占位图的行数 | number | 3 |
width |
设置段落最后一行的宽度 | `number | string` |
MIT License