vue-elementui-skeleton
基于Vue+ElementUI的骨架屏。使用指令v-skeleton
的方式生成骨架屏,可自动识别常用的ElementUI组件并生成对应的骨架屏。
也提供了N多参数以便进行个性化配置。
- el-table:自识别:宽度、列数、行高。可配置:行数、圆角、背景色
- el-menu:TODO
- el-breadcrumb:TODO
- ...
效果
安装
npm i vue-elementui-skeleton
引入
;; Vue; // 可以设置选项的全局默认值和指令名称/*Vue.use(VueElementUISkeleton, { directiveName: 'my-skeleton', rows: 10, radius: 3, bg: 'red'});*/
基础用法
以表格为例,展示基础用法。
配置行数
el-table默认骨架屏的行数为5行,下例修改为10行。
<!-- columns -->
选项
选项 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
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