🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
基于Vue+ElementUI的骨架屏。使用指令`v-skeleton`的方式生成骨架屏,可自动识别常用的ElementUI组件并生成对应的骨架屏。 也提供了N多参数以便进行个性化配置。 * el-table:自识别:宽度、列数、行高。可配置:行数、圆角、背景色 * el-menu:TODO * el-breadcrumb:TODO * ... ### 安装`npm i vue-elementui-skeleton` ~~~ import Vue from 'vue'; import VueElementUISkeleton from 'vue-elementui-skeleton';   Vue.use(VueElementUISkeleton);   // 可以设置选项的全局默认值和指令名称 /* Vue.use(VueElementUISkeleton, {     directiveName: 'v-skeleton',     rows: 10,     radius: 3,     bg: 'red' }); */ ~~~ ``` <template>   <el-table     v-skeleton="{loading: loading, rows: 10}"     :data="tableData"     style="width: 100%"   >     <!-- columns -->   </el-table> </template> ``` ### 选项 | 选项 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | loading | true时渲染骨架屏 | Boolean | \- | false | | rows | 行数,只对el-table生效 | Number | \- | 5 | | radius | 圆角像素 | Number | \- | 5 | | bg | 骨架背景色 | String | \- | #eaebed | 具体参考: https://www.npmjs.com/package/vue-elementui-skeleton