基于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