1.0.14 • Published 3 years ago

vue-skeleton2 v1.0.14

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

这是一款通用的vue骨架屏插件(修改版)

原git地址: https://github.com/zhangOking/vue-skeleton

使用方法

npm install vue-skeleton2 --save-dev

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

骨架屏样式

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

1. 分割线

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

<skeleton active type='straightLine' :options="{
    height: '20px',
    position: 'center'
}" />
API内容类型
type显示类型String组件类型
active是否显示动效Booleantrue/false
options设置项Objectnull
-width线的长度String100%
-height线的宽度String100%
-position线的位置String'top', 'center', 'end'

2. 圆

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

<skeleton  type='circlecom' active :options="{
    width: '150px'
}" />
API内容类型
type显示类型String组件类型
active是否显示动效Booleantrue/false
options设置项Objectnull
-width圆的直径String100%,如果不传,将会自动使用100%

3. 卡片

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

<skeleton type='card' active :options="{
    width: '200px',
    height: '150px'
}" />
API内容类型
type显示类型String组件类型
active是否显示动效Booleantrue/false
options设置项Objectnull
-width线的长度String100%
-height线的宽度String100%

4. 列表

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

<skeleton type='listcom' active :options="{
    row: 3,
    lineHight: 20
}" />
API内容类型
type显示类型String组件类型
active是否显示动效Booleantrue/false
options设置项Objectnull
-width列表的宽度String100%
-height列表单行的高度String20px
-position列表的位置String'top', 'center', 'end'上中下
-row列表行数Number3
-lineHight行间距Number20

5. 混合类型

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

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

<skeleton type="custom" :options="{ width: '100%', height: '100%' }" :childrenOption="[
    {type: 'circlecom', rules: 'a, d', active: true, options:{width: '150px'} },
    {type: 'listcom', rules: 'b, c, e, f', active: true},
    {type: 'straightLine', active: true, rules: 'g, h, i'},
]" />
API内容类型
type显示类型String组件类型
active是否显示动效Booleantrue/false
options设置项Objectnull
-rules出现规则,这里不可以跨行切必须相邻String'a, b, ... i'
-childrenOption设置子组件类型ArrayObject[]
1.0.14

3 years ago

1.0.13

3 years ago

1.0.12

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago