Vue Skeleton Loading is a quick and easy plugin to write custom Skeleton Loading.

Demo

vue-skeleton-loading

Install

npm

npm install vue-skeleton-loading --save 
Copy the code

Dev

// Install depends on NPM install // Run at localhost:8080 NPM run devCopy the code

Usage

Project entry file global registration

import Vue from 'vue'; import VueRouter from 'vue-router'; Import VueSkeletonLoading from 'vue-skeleton-loading'; 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 } });Copy the code

Using the component

There are five components in total, two base components (CircleSkeleton, SquareSkeleton), two layout components (Column, Row), and one container component (SkeletonLoading).

Example 1:

<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>
Copy the code

The effect

Example 2:

<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>
Copy the code

The effect

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% The width defaults to the width of the container in px, EM, and REM units
height String 16px Px, EM, rem units are highly supported
top String 0 The outer margin supports PX, EM, and REM units
bottom String 0 The outer bottom distance supports PX, EM, and REM units

Function

Name Type Descrition
– – –

Events

Name Type Description
– – –

Slot

Name Description
– –

Column

Props

Props Type Default Description
gutter Number 0 The left – to – right margin equals pading: 0 gutter, in px.
span Number – A row is divided into 24 equal portions. The span value is the number of portions occupied in a row.Reference here 。
order Number – The priority of the position in a row,Reference here 。

Function

Name Type Descrition
– – –

Events

Name Type Description
– – –

Slot

Name Description
– –

Row

Props

Props Type Default Description
gutter Object – Top 0 gutter. Bottom 0, in px.
align String – The value can be top, middle, or bottom for detailsflex.
justify Number – The value can be start, end, center, space-around, or space-betweenflex 。

gutter

Props Type Default Description
top String 0 The upper margin is the same as prading -top: top, with units, which can be px em REM.
bottom String 0 The bottom margin is the same as padding-bottom: top, and you need to put units in it, so it could be px em REM.

Function

Name Type Descrition
– – –

Events

Name Type Description
– – –

Slot

Name Description
– –

Notice

Each SkeletonLoading component must be wrapped up in the SkeletonLoading component

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>
Copy the code

License

MIT