vue-skeleton-antd

vue 构建的 ant design 风格骨架屏组件

骨架屏

简单来讲，骨架屏就是优化版的 loading 示意图。

如图所示，上面三者分别是骨架屏、菊花图、空白页。

可以看到骨架屏能够将页面的大致结构描绘出来，其体验要比菊花图好上太多。

骨架屏已经在易通行、支付宝、饿了么、知乎、淘宝等众多 APP 或网站中广泛使用，你还在等什么，快快用起来吧！

详细示例和文档

• GitHub
• 码云镜像

组件引入

1. 安装

使用 npm 安装

npm i vue-skeleton-antd

或使用 yarn 安装

yarn add vue-skeleton-antd

2. 引入组件

import Vue from 'vue';
import vueSkeleton from 'vue-skeleton-antd';

Vue.use(vueSkeleton)

API

1. Skeleton 骨架屏

属性	说明	类型	默认值
active	是否展示动画效果	boolean	false
avatar	是否显示头像占位图	boolean 或 object	false
paragraph	是否显示段落占位图	boolean 或 object	true
title	是否显示标题占位图	boolean 或 object	true
loading	为 true 时，显示占位图。 反之则直接展示子组件	boolean	true

2. AvatarProps 头像参数

头像参数 avatar 除了可以设置布尔值之外，还可以是 Object。如果是 Object，则允许拥有以下属性。

属性	说明	类型	默认值
shape	指定头像的形状	Enum{ 'circle', 'square' }	circle

3. TitleProps 标题参数

标题参数 avatar 除了可以设置布尔值之外，还可以是 Object。如果是 Object，则允许拥有以下属性。

属性	说明	类型	默认值
width	设置标题占位图的宽度	string	50%

4. ParagraphProps 段落参数

段落参数 avatar 除了可以设置布尔值之外，还可以是 Object。如果是 Object，则允许拥有以下属性。

属性	说明	类型	默认值
rows	设置段落占位图的行数	number	3
width	设置段落最后一行的宽度	`number	string`

LICENSE

MIT License