vue-skeleton-loading

Vue Skeleton Loading

Vue Skeleton Loading 是一个让我们快速和方便写出自定义 skeleton loading 的插件。

Demo

vue-skeleton-loading

Install

npm

npm install vue-skeleton-loading --save 

Dev

// 安装依赖
npm install

// 运行在 localhost:8080
npm 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>

License

MIT