vue3笔记案例——Suspense使用之骨架屏

news2024/12/25 10:25:01

文章目录

        • skeleton组件
        • sync组件
      • Suspense使用

skeleton组件

示例图
在这里插入图片描述
代码

<template>
  <div class="sk">
    <div class="sk-2">
      <div class="sk-2-1"></div>
      <div></div>
    </div>
    <hr>
    <div class="sk-3"></div>
    <div class="sk-3"></div>
  </div>
</template>

<script setup lang='ts'></script>

<style lang='less' scoped>
@bgColor: #eee;
@conColor: #ccc;

.sk {
  background-color: @bgColor;
  padding: 20px;
  .sk-2 {
    display: inline-flex;
    align-items: center;
    margin: 10px 0;
    height: 50px;
    .sk-2-1 {
      height: inherit;
      width: 50px;
      margin-right: 1rem;
      border-radius: 50%;
      background-color: @conColor;
    }
    div:last-child {
      width: 60px;
      height: 20px;
      background-color: @conColor;
    }
  }
  .sk-3 {
    margin-top: 10px;
    width: 100%;
    height: 30px;
    background-color: @conColor;
  }
}
</style>

sync组件

示例图

代码

<template>
  <div class="sk">
    <div class="sk-2">
      <div class="sk-2-1"><img :src="data.url"></div>
      <div><span>{{ data.name }}</span>&nbsp;<span>{{ data.age }}</span></div>
    </div>
    <hr>
    <div class="sk-3">{{ data.desc }}</div>
  </div>
</template>

<script setup lang='ts'>
import { axios } from '@/server/axios'

interface Data {
  data: {
    name: string
    url: string
    age: number
    desc: string
  }
}

const { data } = await axios.get<Data>('./data.json')

</script>

<style lang='less' scoped>

.sk {
  padding: 20px;

  .sk-2 {
    display: inline-flex;
    align-items: center;
    margin: 10px 0;
    height: 50px;

    .sk-2-1 {
      height: inherit;
      width: 50px;
      margin-right: 1rem;
      border-radius: 50%;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    div:last-child {
      width: 60px;
      height: 20px;
    }
  }

  .sk-3 {
    margin-top: 10px;
    width: 100%;
    height: 30px;
    line-height: 30px;
  }
}
</style>
// axios.ts
export const axios = {
  get <T>(url:string):Promise<T> {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest()
      xhr.open("GET", url)

      xhr.onreadystatechange = () => {
        if(xhr.readyState == 4 && xhr.status == 200) {
          // 增加加载时间
          setTimeout(()=>{
            resolve(JSON.parse(xhr.responseText))
          },2000)
        }
      }
      xhr.send(null)
    })
  }
}

data.json 放在 public 文件夹下不会被编译且可以直接被访问到
在这里插入图片描述

Suspense使用

示例图
在这里插入图片描述
代码

<template>
  <Suspense>
    <!-- 具有深层异步依赖的组件 -->
    <Sync />
    <!-- 在 #fallback 插槽 -->
    <template #fallback>
      <Skeleton />
    </template>
  </Suspense>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue'
import Skeleton from '@/components/skeleton.vue';
// import Sync from '@/components/sync.vue';

const Sync = defineAsyncComponent(()=> import('@/components/sync.vue'))

</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/135227.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

亚马逊云科技 Build On -轻松搭建咖啡点单系统

【前言】 1、什么是Build On&#xff1f; Build On是亚马逊团队基于亚马逊云服务开发&#xff0c;打造的一系列可快速上手的实操性活动。通过通俗易懂的场景案例、简单快捷的开发路径&#xff0c;参与者可快速理解目标任务涉及的相关知识&#xff0c;同时对亚马逊云服务具备一…

【回答问题】ChatGPT上线了!推荐30个以上比较好的意图识别模型

【回答问题】ChatGPT上线了&#xff01;推荐30个以上比较好的意图识别github源码&#xff1f; 好的&#xff0c;这里列出 30 个相对比较优秀的意图识别 GitHub 源码&#xff1a; DeepPavlov Rasa Snips spaCy OpenAI GPT OpenAI DialogFlow ChatterBot Botpress Amazon Lex M…

ArcGIS基础实验操作100例--实验41提取道路面中心线

本实验专栏参考自汤国安教授《地理信息系统基础实验操作100例》一书 实验平台&#xff1a;ArcGIS 10.6 实验数据&#xff1a;请访问实验1&#xff08;传送门&#xff09; 高级编辑篇--实验41 提取道路面中心线 目录 一、实验背景 二、实验数据 三、实验步骤 &#xff08;1…

2022,我遭遇的那些小事

前言 2022&#xff0c;总感觉一晃眼就过去了&#xff0c;不知不觉自己坚持更文已经一周年了。回顾这一周年&#xff0c;无论是在技术成长上还是职业发展上&#xff0c;都有了许多新的体会。 裁员风波 还记得是四、五月份的一个上午&#xff0c;原本还在紧张的加班赶项目&…

educoder数据结构与算法 队列 第2关 实现一个链接存储的队列

本文已收录于专栏 &#x1f332;《educoder数据结构与算法_大耳朵宋宋的博客-CSDN博客》&#x1f332; 目录 任务描述 相关知识 编程要求 测试说明 AC_Code 任务描述 本关任务&#xff1a;实现 step2/CLnkQueue.cpp 中的CLQ_IsEmpty、CLQ_Length、CLQ_In和CLQ_Out四个操…

论文阅读和复现:去除PPG运动伪影的IEEE论文

论文阅读和代码复现&#xff1a; 《Combining Nonlinear Adaptive Filtering and Signal Decomposition for Motion Artifact Removal in Wearable Photoplethysmography》 基本介绍&#xff1a; 由于手腕运动造成的噪声&#xff1a;运动伪影&#xff0c;使得PPG方法的心率监…

shell-流程控制之条件判断

1、判断当前磁盘剩余空间是否有20G&#xff0c;如果小于20G&#xff0c;则将报警邮件发送给管理员&#xff0c;每天检查一次磁盘剩余空间。 补充&#xff1a;20G20971520kb [rootcotenos day06]# pwd /root/shell/day06 [rootcotenos day06]# vim free_men.sh #!/bin/bash f…

spring boot启动环境的配置与更改(dev,local,pro)包含单元测试环境

文件类型介绍 properties 该文件是一种key-value的格式&#xff0c;配置文件的特点是&#xff0c;它的Key-Value一般都是String-String类型的&#xff0c;因此我们完全可以用Map<String, String>来表示它。 用Properties读取配置文件非常简单。Java默认配置文件以.pro…

elasticsearch 7.9.3知识归纳整理(二)之es基本原理及使用kibana操作es的常见命令

es基本原理及使用kibana操作es的常见命令 一、es的基本原理与基础概念 1.1 倒排索引 倒排索引源于实际应用中需要根据属性的值来查找记录。这种索引表中的每一项都包括一个属性值和具有该属性值的各记录的地址。由于不是由记录来确定属性值&#xff0c;而是由属性值来确定记录…

【机器学习】机器学习中常用的损失函数一览

问题 机器学习中常用的损失函数总结 前言 我们经常听到损失函数、代价函数和目标函数这三种说法&#xff0c;这三种说法有什么联系和区别呢&#xff1f;这里明确下&#xff1a; 损失函数 Loss Function 通常是针对单个训练样本而言的&#xff0c;给定一个模型输出 y^\hat{y…

设计模式 - UML类图

1. 什么是 UML 统一建模语言(Unified Modeling Language,UML)是用来设计软件的可视化建模语言。它的特点是简单、统图形化、能表达软件设计中的动态与静态信息。L从目标系统的不同角度出发&#xff0c;定义了用例图、类图、对象图、状态图、活动图、时序图、协作图、构件图部署…

8种数据结构

快速介绍8种常用数据结构 数据结构是一种特殊的组织和存储数据的方式&#xff0c;可以使我们可以更高效地对存储的数据执行操作。数据结构在计算机科学和软件工程领域具有广泛而多样的用途。 几乎所有已开发的程序或软件系统都使用数据结构。此外&#xff0c;数据结构属于计算…

【回答问题】ChatGPT上线了!有哪些3D点云算法模型?3D点云算法模型实现代码?

有哪些3D点云算法模型&#xff1f; 3D点云算法的模型有很多种&#xff0c;以下是一些常见的算法模型&#xff1a; 归一化重心法&#xff08;Normalized point-to-point ICP&#xff09;&#xff1a;是一种常用的模型配准方法&#xff0c;用于将两个模型中的点匹配起来。 基于…

跨年晚会前夕,曹云金和前妻复合了

每到跨年晚会的时候&#xff0c;总会有大的新闻事件发生&#xff0c;比如说在今年跨年晚会前夕&#xff0c;主持人何炅的老父亲&#xff0c;就非常不幸地驾鹤西去了。话说主持人何炅&#xff0c;在父亲离开后坚强地主持节目&#xff0c;他泪眼婆娑的表情&#xff0c;也登上了各…

电子游戏销售之回归模型与数据可视化

电子游戏销售之回归模型与数据可视化 文章目录电子游戏销售之回归模型与数据可视化0、写在前面1、回归模型1.1 模型建立准备1.2 建立模型1.3 模型分析2、数据可视化3、参考资料0、写在前面 该篇文章的任务包括以下3个方面 检测与处理缺失值建立回归模型数据可视化 实验环境 Pyt…

我的2022年总结

我的2022年总结 行走于世&#xff0c;风大时要表现逆的风骨&#xff0c;风小时要表现顺的悠然。 我们可以转身&#xff0c;但是不必回头&#xff0c;即使有一天你发现自己走错了&#xff0c;你也应该转身大步朝着对的方向去&#xff0c;而不是回头埋怨自己错了。 一、旧事 …

INT201-Decision, Computation and Language(2)

文章目录5. Turing Machine5.1 TM Configuration5.2 TM Transitions5.3 TM Computation5.4 Language accepted by TM5.5 Decider5.6 Multi-tape TM5.6.1 Multi-tape TM equivalent to 1-tape TM5.7 Nondeterministic TM5.7.1 Address5.7.2 NTM equivalent to TM5.8 Enumerable …

【Linux操作系统】yum三板斧和yum源的配置

文章目录一.Linux下软件的生态二.yum三板斧1.yum简介2.list搜索软件包3.install下载并安装4.remove卸载软件三.windows/Linux下文件互传1.lrzsz的查看和下载安装2.rz上传3.sz下载四.Linux软件生态的本土化1.镜像简介2.Linux软件生态的本土化五.yum源的配置1.找到yum源配置文件并…

Jedis: Java连接redis服务

文章目录一、编程语言与 Redis二、Jedis 连接三、JedisPool 连接池四、可视化客户端提示&#xff1a;以下是本篇文章正文内容&#xff0c;Redis系列学习将会持续更新 一、编程语言与 Redis ● Java 语言连接 redis 服务   Jedis   SpringData Redis   Lettuce ● C 、C …

ArcGIS基础实验操作100例--实验40构建点对连线

本实验专栏参考自汤国安教授《地理信息系统基础实验操作100例》一书 实验平台&#xff1a;ArcGIS 10.6 实验数据&#xff1a;请访问实验1&#xff08;传送门&#xff09; 高级编辑篇--实验40 构建点对连线 目录 一、实验背景 二、实验数据 三、实验步骤 &#xff08;1&…