Vue Skeleton Loading
Vue Skeleton Loading 是一个让我们快速和方便写出自定义 skeleton loading 的插件。
Demo
Install
npm
npm install vue-skeleton-loading --save
Dev
// 安装依赖npm install // 运行在 localhost:8080npm run dev
Usage
项目入口文件全局注册
import Vue from 'vue';import VueRouter from 'vue-router';// 引用组件import VueSkeletonLoading from 'vue-skeleton-loading';import App from './app.vue';import Index from './components';import Page from './components/page';import List1 from './components/list1'; // 安装插件Vue.use(VueSkeletonLoading);Vue.use(VueRouter); const routes = [ { name: 'index', path: '/', component: Index }, { name: 'page', path: '/page', component: Page }, { name: 'list1', path: '/list1', component: List1 }];const router = new VueRouter({ routes}); new Vue({ el: '#app', router, template: '<App />', components: { App }});
使用组件
本插件总共有 5 个组件,两个基础组件( CircleSkeleton, SquareSkeleton ),两个布局组件( Column, Row ),一个容器组件( SkeletonLoading )。
例子一:
<template> <div class="list1"> <skeleton-loading> <row v-for="i in 6" :key="i" :gutter="{top: '10px', bottom: '10px'}" > <column :span="3" :gutter="10"> <circle-skeleton></circle-skeleton> </column> <column :span="20" :gutter="10"> <square-skeleton :count="2" :boxProperties="{ bottom: '15px', width: '250px', height: '15px' }" > </square-skeleton> </column> </row> </skeleton-loading> </div></template> <script> export default {}</script>
效果
例子二:
<template>
<div class="page">
<skeleton-loading>
<row
:gutter="{
bottom: '15px'
}"
>
<square-skeleton
:count="2"
:boxProperties="{
top: '10px',
height: '26px'
}"
>
</square-skeleton>
</row>
<row>
<column :span="4">
<circle-skeleton></circle-skeleton>
</column>
<column :span="20" :gutter="20">
<square-skeleton
:boxProperties="{
top: '10px',
width: '70px',
height: '15px'
}"
>
</square-skeleton>
<square-skeleton
:boxProperties="{
width: '100px',
height: '15px',
top: '10px'
}"
>
</square-skeleton>
</column>
</row>
<row :gutter="{top: '20px'}">
<square-skeleton
:count="4"
:boxProperties="{
bottom: '10px'
}"
>
</square-skeleton>
</row>
<row>
<square-skeleton
:boxProperties="{
bottom: '10px',
height: '200px'
}"
>
</square-skeleton>
</row>
</skeleton-loading>
</div>
</template>
<script>
export default {}
</script>
<style lang="less">
.page {
padding: 15px;
}
</style>
效果
Options
SkeletonLoading
Props
Props | Type | Default | Description |
---|---|---|---|
- | - | - | - |
Function
Name | Type | Descrition |
---|---|---|
- | - | - |
Events
Name | Type | Description |
---|---|---|
- | - | - |
Slot
Name | Description |
---|---|
default slot | - |
CircleSkeleton
Props
Props | Type | Default | Description |
---|---|---|---|
backColor | String | #e7e7e7 | background color |
diameter | String | 100% | diameter of circle |
Function
Name | Type | Descrition |
---|---|---|
- | - | - |
Events
Name | Type | Description |
---|---|---|
- | - | - |
Slot
Name | Description |
---|---|
- | - |
SquareSkeleton
Props
Props | Type | Default | Description |
---|---|---|---|
backColor | String | #e7e7e7 | background color |
boxProperties | Object | box properties of square skeleton | |
count | Number | 1 | count of square skeleton |
boxProperties
Item | Type | Default | Description |
---|---|---|---|
width | String | 100% | 宽度 默认为容器的宽度支持px、em、rem单位 |
height | String | 16px | 高度 支持px、em、rem单位 |
top | String | 0 | 外上边距 支持px、em、rem单位 |
bottom | String | 0 | 外下边距 支持px、em、rem单位 |
Function
Name | Type | Descrition |
---|---|---|
- | - | - |
Events
Name | Type | Description |
---|---|---|
- | - | - |
Slot
Name | Description |
---|---|
- | - |
Column
Props
Props | Type | Default | Description |
---|---|---|---|
gutter | Number | 0 | 左右的外边距 相当于 pading: 0 gutter, 单位px。 |
span | Number | - | 一行被等分为24份,span值为一行中占据的份数,参考这里 。 |
order | Number | - | 一行中位置优先级,参考这里 。 |
Function
Name | Type | Descrition |
---|---|---|
- | - | - |
Events
Name | Type | Description |
---|---|---|
- | - | - |
Slot
Name | Description |
---|---|
- | - |
Row
Props
Props | Type | Default | Description |
---|---|---|---|
gutter | Object | - | 上下的外边距 相当于 pading: gutter.top 0 gutter.bottom 0, 单位px。 |
align | String | - | 值可以为 top, middle, bottom, 具体可以参考 flex。 |
justify | Number | - | 值可以为 start, end, center, space-around, space-between, 具体可以参考 flex 。 |
gutter
Props | Type | Default | Description |
---|---|---|---|
top | String | 0 | 上外边距 相当于 pading-top: top, 需要带上单位, 单位可以是px em rem。 |
bottom | String | 0 | 下外边距 相当于 pading-bottom: top, 需要带上单位, 单位可以是px em rem。 |
Function
Name | Type | Descrition |
---|---|---|
- | - | - |
Events
Name | Type | Description |
---|---|---|
- | - | - |
Slot
Name | Description |
---|---|
- | - |
Notice
每一个 Skeleton Loading 所有的组件都必须是被 SkeletonLoading 组件包裹使用
e.g
<skeleton-loading>
<row
:gutter="{
bottom: '15px'
}"
>
<square-skeleton
:count="2"
:boxProperties="{
top: '10px',
height: '26px'
}"
>
</square-skeleton>
</row>
<row>
<column :span="4">
<circle-skeleton></circle-skeleton>
</column>
<column :span="20" :gutter="20">
<square-skeleton
:boxProperties="{
top: '10px',
width: '70px',
height: '15px'
}"
>
</square-skeleton>
<square-skeleton
:boxProperties="{
width: '100px',
height: '15px',
top: '10px'
}"
>
</square-skeleton>
</column>
</row>
<row :gutter="{top: '20px'}">
<square-skeleton
:count="4"
:boxProperties="{
bottom: '10px'
}"
>
</square-skeleton>
</row>
<row>
<square-skeleton
:boxProperties="{
bottom: '10px',
height: '200px'
}"
>
</square-skeleton>
</row>
</skeleton-loading>