# Skeleton 骨架屏

<template>
  <w-switch v-model="showContent" />
  <ul v-if="showContent" class="content-wrapper">
    <li v-for="item in data" :key="item.label">
      <strong v-text="item.label"></strong>
      {{item.value}}
    </li>
  </ul>
  <w-skeleton :loading="!showContent" />
</template>

<script>
export default {
  data () {
    return {
      showContent: false,
      data: [{
        label: '基础用法',
        value: '骨架屏默认是以文本的样式进行展示, 默认占位3行内容.'
      }, {
        label: '组合用法',
        value: '利用extraConfig配置项, 可以灵活的对骨架屏实现组合, 以适配更过的使用场景.'
      }, {
        label: '开启动画',
        value: '骨架屏默认动画效果是关闭的, 可以通过 animated 参数手动开启.'
      }]
    }
  }
}
</script>

<template>
  <w-skeleton loading :rows="rows1" :extraConfig="extraConfig1" />
  <w-skeleton loading :rows="rows2" :extraConfig="extraConfig2"
    :contentConfig="contentConfig" />
  <w-skeleton loading :rows="rows3" :extraConfig="extraConfig3" />
</template>

<script>
export default {
  data () {
    return {
      contentConfig: {
        itemSpace: '18px',
        itemHeight: '16px'
      },
      extraConfig1: {
        position: 'left',
        shape: 'circle',
        size: '60px'
      },
      rows1: 2,
      extraConfig2: {
        position: 'right',
        shape: 'square',
        size: ['80px', '120px']
      },
      rows2: 3,
      extraConfig3: {
        position: 'top',
        shape: 'square',
        size: ['50%', '60px']
      },
      rows3: 2
    }
  }
}
</script>

<template>
  <w-skeleton animated loading :extraConfig="extraConfig" />
</template>

<script>
export default {
  data () {
    return {
      extraConfig: {
        size: '60px',
        position: 'left',
        shape: 'circle'
      }
    }
  }
}
</script>