vue-skeleton-element v1.0.1

vue-skeleton-element

A skeleton element component for vue

Install

npm i vue-skeleton-element --save

Usage

<template>
    <div class="page-wrap">
        <h1>&lt;SkeletonList/&gt;</h1>
        <skeleton-list :data="list" :repeat="5" :enable-animation="true">
            <ul>
                <li v-for="item in list" :key="item.id">{{item.name}}</li>
            </ul>
        </skeleton-list>
        <h1>&lt;SkeletonTitle/&gt;</h1>
        <skeleton-title :data="title" :enable-animation="true">
            <h2>{{title}}</h2>
        </skeleton-title>
        <h1>&lt;SkeletonPage/&gt;</h1>
        <skeleton-page :data="title" :enable-animation="true">
            <h2>{{title}}</h2>
        </skeleton-page>
    </div>
</template>

import { SkeletonList, SkeletonTitle, SkeletonPage } from '../src/index'


export default {
    data() {
        return {
            list: null,
            title: null
        }
    },
    mounted(){
        setTimeout(() => {
            this.list = [
                { id:1, name: 'Appetite for Destruction' },
                { id:2, name: 'Use Your Illusion I' },
                { id:3, name: 'Use Your Illusion II' },
            ];
            this.title = 'Appetite for Destruction'
        }, 3000);
    },
    methods:{
        
    },
    components:{
        SkeletonList,
        SkeletonTitle,
        SkeletonPage
    }
};

Options

data (Object | Array | String)

This is the data you're waiting to load. The skeleton element will show when data is null

repeat (Number)

The count of the gray line in <skeleton-list/>

enable-animation (Boolean)

set true to enable the animation

Result

PC

Mobile