Skeleton 骨架屏

在页面上待加载区域填充灰色的占位图，本质上是界面加载过程中的过渡效果。

效果

使用方法

<template>
    <div >
        <lc-title title="骨架屏"></lc-title>
        <lc-skeleton class="my-skeleton">
            
            <row padding="15px 10px 0 ">

                <skeleton-square width="200px"  ></skeleton-square>
                <skeleton-square width="50px" margin="0 0 0 40px"></skeleton-square>
                <skeleton-square width="50px"  margin="0 0 0 10px"></skeleton-square>
            </row>
            <row padding="20px 10px">
                <skeleton-circle  diameter="50px"></skeleton-circle>
                <skeleton-square width="275px" :count="3" margin="5px 10px 5px 10px"></skeleton-square>
            </row>

            <row padding="0 10px 20px">
                <skeleton-circle  diameter="50px"></skeleton-circle>
                <column>
                        <skeleton-square width="275px" :count="2" margin="5px 10px 5px 10px"></skeleton-square>
                        <skeleton-square width="100px"    margin="5px 10px 5px 10px"></skeleton-square>
                </column>
            </row>

            <row padding="0 10px 20px">
                <skeleton-square width="75px" height="75px" ></skeleton-square>
                <column padding="0 0 0 10px">
                    <skeleton-square width="275px"   height="10px" margin="0 10px 5px 10px"></skeleton-square>
                    <skeleton-square width="100px"  height="7.5px"   margin="5px 10px 5px 10px"></skeleton-square>
                    <skeleton-square width="275px"  backColor="#ffffff" :count="2"></skeleton-square>
                    <skeleton-square width="50px"     margin="0 10px 5px 10px"></skeleton-square>
                </column>
                
            </row>
                <row padding="0 10px 20px">
                    <skeleton-square width="30px" height="30px" v-for=" i in 5" :key="i" margin="15px"></skeleton-square>
                </row>
            
        </lc-skeleton>
    </div>
  
</template>

<script>

import LcTitle from '_mods/title.vue';
import Category from '_mods/category.vue';
export default {
	components: { LcTitle, Category },
    data(){
        return{
        }
    }
    
}
</script>
<style lang="less" scoped>

.my-skeleton{
    margin-top:60px;
    z-index:998;
}
</style>

API

layout（row|column）

字段	说明	类型	默认值
width	宽度	String	-
padding	填充间距	String	-

basic（square|circle）

字段	说明	类型	默认值
width	宽度	String	-
margin	外部间距	String	-