vue骨架屏插件

这是一款通用的vue骨架屏插件
git地址: https://github.com/zhangOking/vue-skeleton

使用方法

npm install vue-skeleton-component --save-dev

// main.js
import skeleton from 'vue-skeleton-component'
Vue.use(skeleton)

骨架屏样式

初期版本只提供几个简单的样式可以选择,后续会慢慢补充

1. 分割线

以给定的容器大小为基准画一条线


分割线

API 内容 类型
type 显示类型 String 组件类型
active 是否显示动效 Boolean true/false
options 设置项 Object null
-width 线的长度 String 100%
-height 线的宽度 String 100%
-position 线的位置 String ['top', 'center', 'end']

2. 圆

画一个圆, 需要给出圆的直径,否则在一个长方形容器中将表现为椭圆形



API 内容 类型
type 显示类型 String 组件类型
active 是否显示动效 Boolean true/false
options 设置项 Object null
-width 圆的直径 String 100%,如果不传,将会自动使用100%

3. 卡片

画一个方块,需要给定宽和高,否则将会默认自动填充容器


卡片

API 内容 类型
type 显示类型 String 组件类型
active 是否显示动效 Boolean true/false
options 设置项 Object null
-width 线的长度 String 100%
-height 线的宽度 String 100%

4. 列表

创建一个文字行效果,需要给出文字行数和行高


列表

API 内容 类型
type 显示类型 String 组件类型
active 是否显示动效 Boolean true/false
options 设置项 Object null
-width 列表的宽度 String 100%
-height 列表单行的高度 String 20px
-position 列表的位置 String ['top', 'center', 'end']上中下
-row 列表行数 Number 3
-lineHight 行间距 Number 20

5. 混合类型

混合类型可以使用以上几种类型的全部api,将其整合到一起,相互拼接


混合类型

混合类型使用了九宫格布局来作为基础布局(grid布局),将你想插入的组件按照[a ~ i]的顺序进行排列,你可以选择你想让哪些组件出现在哪一个位置,简单配置,就可以达到想要的效果,如下图


九宫格布局

API 内容 类型
type 显示类型 String 组件类型
active 是否显示动效 Boolean true/false
options 设置项 Object null
-rules 出现规则,这里不可以跨行切必须相邻 String 'a, b, ... i'
-childrenOption 设置子组件类型 Array[Object] []

你可能感兴趣的:(vue骨架屏插件)