异步组件defineAsyncComponent - 骨架屏

<template>

实现骨架屏效果

<Suspense>

  <template #default>

    <sync />

  </template>

  <template #fallback>

    <skeleton />

  </template>

</Suspense>

</template>

<script setup lang='ts'>

import { defineAsyncComponent } from 'vue';

import skeleton from '../study/defineAsyncComponent/skeleton.vue';

// 异步组件需要使用defineAsyncComponent

const sync = defineAsyncComponent(() => import('../study/defineAsyncComponent/sync.vue'));

</script>

<style scoped lang='scss'>

</style>

 

export const axios = {

  get(url) {

    return new Promise((resolve) => {

      const xhr = new XMLHttpRequest();

      xhr.open('GET', url);

      xhr.onreadystatechange = () => {

        if (xhr.readyState === 4 && xhr.status === 200) { // 数据读取成功

          setTimeout(() => {

            resolve(JSON.parse(xhr.responseText)); // 模拟请求延迟解析数据

          }, 1000);

        }

      }

      xhr.send(null);

    });

  }

}

 

<template>

<div>1123</div>

<div>{{ data.name }}</div>

</template>

<script setup lang='ts'>

import { axios } from './axios.js'

// 不需要提前声明async,直接使用即可

const data = await axios.get('/public/data.json')

</script>

<style scoped lang='scss'>

</style>

 

<template>

<div class="sk"></div>

</template>

<script setup lang='ts'>

import { ref, reactive } from 'vue'

</script>

<style scoped lang='scss'>

.sk {

  width: 100px;

  height: 100px;

  background-color: red;

}

</style>