Vue Skeleton Loading 是一个让我们快速和方便写出自定义 skeleton loading 的插件。
npm
npm install vue-skeleton-loading --save
// 安装依赖
npm install
// 运行在 localhost:8080
npm run dev
项目入口文件全局注册
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>
效果
Props
Props | Type | Default | Description |
---|---|---|---|
- | - | - | - |
Function
Name | Type | Descrition |
---|---|---|
- | - | - |
Name | Type | Description |
---|---|---|
- | - | - |
Name | Description |
---|---|
default slot | - |
Props
Props | Type | Default | Description |
---|---|---|---|
backColor | String | #e7e7e7 | background color |
diameter | String | 100% | diameter of circle |
Function
Name | Type | Descrition |
---|---|---|
- | - | - |
Name | Type | Description |
---|---|---|
- | - | - |
Name | Description |
---|---|
- | - |
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 |
---|---|---|
- | - | - |
Name | Type | Description |
---|---|---|
- | - | - |
Name | Description |
---|---|
- | - |
Props
Props | Type | Default | Description |
---|---|---|---|
gutter | Number | 0 | 左右的外边距 相当于 pading: 0 gutter, 单位px。 |
span | Number | - | 一行被等分为24份,span值为一行中占据的份数,参考这里 。 |
order | Number | - | 一行中位置优先级,参考这里 。 |
Function
Name | Type | Descrition |
---|---|---|
- | - | - |
Name | Type | Description |
---|---|---|
- | - | - |
Name | Description |
---|---|
- | - |
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 |
---|---|---|
- | - | - |
Name | Type | Description |
---|---|---|
- | - | - |
Name | Description |
---|---|
- | - |
每一个 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>