Skeleton 骨架屏 ​

<f-skeleton /> <f-skeleton />

<f-skeleton :rows="3" />

<f-skeleton animated /> <f-skeleton round animated />

<f-skeleton animated size="large" />
<f-skeleton animated size="middle" />
<f-skeleton animated size="small" />
<f-skeleton animated size="mini" />

<f-skeleton animated round size="large" />
<f-skeleton animated round size="middle" />
<f-skeleton animated round size="small" />
<f-skeleton animated round size="mini" />

<f-skeleton animated :rows="5" difference />

<template>
  <f-skeleton animated :rows="2" :loading="loading">
    <f-list>
      <f-list-item>这是一段文字</f-list-item>
      <f-list-item>这是一段文字</f-list-item>
    </f-list>
  </f-skeleton>

  <f-button :loading="loading" simple type="primary" @click="startLoad">
    {{ loading ? '加载中...' : `开始加载` }}
  </f-button>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const loading = ref(false)

  const startLoad = () => {
    loading.value = true
    setInterval(() => {
      loading.value = false
    }, 3000)
  }
</script>