vue骨架屏

skeleton.vue

<template>
    <div class="skeleton-wrapper">
        <div class="skeleton-content">
            <Item :paragraph="paragraph" :active="active"></Item>
        </div>
    </div>
</template>

<script>
    import Item from './Item'
    export default {
        name: "Skeleton",
        props:['paragraph','active'],
        mounted(){
            console.log(this.paragraph)
        },
        components:{
            Item
        }
    }
</script>

<style scoped>
</style>

Item.vue

<template>
    <div>
        <div
                v-if="paragraph.type=='row'"
                :class="paragraph.containerClass"
                class="ske-row-container"
        >
            <div class="ske ske-row" :style="row.rowStyle" v-for="(row,index) in paragraph.rows" :key="index">
                <Item :paragraph="row" :active="active"></Item>
            </div>
        </div>

        <div
            v-else-if="paragraph.type=='col'"
            :class="paragraph.containerClass"
            class="ske-row-container"
        >
            <div class="ske ske-col" :style="col.colStyle" v-for="(col,index) in paragraph.cols" :key="index">
                <Item :paragraph="col" :active="active"></Item>
            </div>
        </div>

        <div
                v-else-if="paragraph.type=='rect'"
                :class="paragraph.containerClass"
                class="ske-row-container"
        >
            <div class="ske ske-rect" :class="{'ske-ani':active}" :style="paragraph.style">
            </div>
        </div>

        <div
                v-else-if="paragraph.type=='circle'"
                :class="paragraph.containerClass"
                class="ske-row-container"
        >
            <div class="ske ske-circle" :class="{'ske-ani':active}" :style="paragraph.style">
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Item",
        props:['paragraph','active']
    }
</script>

<style scoped>
    @keyframes skeleton-stripes {
        from {
            background-position: 0 0;
        }
        to {
            background-position: 20rem 0;
        }
    }
    .ske-rect, .ske-circle {
        background-size: 400% 100%;
        background-color: #f2f2f2;
        margin: 0;
    }
    .ske-rect.ske-ani, .ske-circle.ske-ani {
        animation: skeleton-stripes 1s linear infinite;
        background: #F1F3F4 linear-gradient(90deg, rgba(255, 255, 255, 0.39) 25%, transparent 25%);
        background-size: 20rem 20rem;
    }
    .ske-col-container {
        display: flex;
    }
    .ske-col, .ske-row {
        margin: 0;
    }
    .ske-circle {
        border-radius: 100%;
    }
</style>

调用

<template>
    <Skeleton :paragraph="paragraph" :active="true"/>
</template>

<script>
    import Skeleton from './../components/Skeleton/Skeleton'
    export default {
        data() {
            return {
                paragraph: {
                    type: "row",
                    rows: [
                        {
                            type: 'rect',
                            style: {
                                width: '50%',
                                height: '16px'
                            }
                        },
                        {
                            type: 'rect',
                            rowStyle: {
                                marginTop: '24px'
                            },
                            style: {
                                width: '100%',
                                height: '16px'
                            }
                        },
                        {
                            type: 'rect',
                            rowStyle: {
                                marginTop: '16px'
                            },
                            style: {
                                width: '50%',
                                height: '16px'
                            }
                        },
                        {
                            type: 'rect',
                            rowStyle: {
                                marginTop: '16px'
                            },
                            style: {
                                width: '61%',
                                height: '16px'
                            }
                        }
                    ]
                }
            }
        },
        components:{
            Skeleton
        }
    }
</script>