vue-elementui-skeleton

基于Vue+ElementUI的骨架屏。使用指令v-skeleton的方式生成骨架屏，可自动识别常用的ElementUI组件并生成对应的骨架屏。
也提供了N多参数以便进行个性化配置。

- el-table：自识别：宽度、列数、行高。可配置：行数、圆角、背景色
- el-menu：TODO
- el-breadcrumb：TODO
- ...

效果

!效果

安装

``
npm i vue-elementui-skeleton
`

引入

`js
import Vue from 'vue';
import VueElementUISkeleton from 'vue-elementui-skeleton';

Vue.use(VueElementUISkeleton);

// 可以设置选项的全局默认值和指令名称
/*
Vue.use(VueElementUISkeleton, {
directiveName: 'my-skeleton',
rows: 10,
radius: 3,
bg: 'red'
});
*/
`

基础用法

以表格为例，展示基础用法。

`html



`

配置行数

el-table默认骨架屏的行数为5行，下例修改为10行。

`html

``

选项

| 选项 | 说明 | 类型 | 可选值 | 默认值 |
| ----- | ----- | ----- | ----- | ----- |
| loading | true时渲染骨架屏 | Boolean | - | false |
| rows | 行数，只对el-table生效 | Number | - | 5 |
| radius | 圆角像素 | Number | - | 5 |
| bg | 骨架背景色 | String | - | #eaebed |

其他

- 项目地址：https://github.com/kangyonggan/vue-elementui-skeleton
- 作者主页：https://kangyonggan.com
- 作者邮箱：java@kangyonggan.com