探索 Vue3 (五) 骨架屏

骨架屏是页面的一个空白版本,通常会在页面完全渲染之前,通过一些灰色的区块大致勾勒出轮廓,待数据加载完成后,再替换成真实的内容。

目前主流 UI库 都有骨架屏,如 Element-UIAntd

可以看到使用起来非常简单,只需要一行代码即可

// element
<el-skeleton />// antd
<a-skeleton />

安装

npm i -S @x-ui-vue3/skeleton

 main.js 文件中挂载

import { createApp } from 'vue'
import Skeleton from '@x-ui-vue3/skeleton'
import App from './App.vue'createApp(App).use(Skeleton).mount('#app')

 demo

<script setup>
import { ref } from 'vue'
const loading = ref(false)
</script><template><label for="loading">点击切换</label><input v-model="loading" id="loading" type="checkbox" /><br /><br /><div v-skeleton="loading"><span v-skeleton-item>超文本标记语言是一种用于创建网页的标准标记语言。</span><br /><br /><span v-skeleton-item>www.runoob.com</span><br /><br /><span v-skeleton-item>Good good study, day day up!</span></div>
</template>

官网地址:@x-ui-vue3/skeleton - npm

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

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

相关文章

鸿蒙开发(二)- 鸿蒙DevEco开发环境搭建

上篇说到&#xff0c;鸿蒙开发目前势头旺盛&#xff0c;头部大厂正在如火如荼地进行着&#xff0c;华为也对外宣称已经跟多个厂商达成合作。目前看来&#xff0c;对于前端或客户端开发人员来说&#xff0c;掌握下鸿蒙开发还是有些必要性的。如果你之前是从事Android开发的&…

【Qt-QFile-QDir】

Qt编程指南 ■ Stream■ QTextStream■ QDataStream ■ QDial■ QDir■ QFile■■ ■ Stream ■ QTextStream /* 获取文件的路径 */ QString fileName QFileDialog::getOpenFileName(this);/* 指向文件 */ file.setFileName(fileName);/* 判断文件是否存在 */ if (!file.exi…

论文阅读<CF-YOLO: Cross Fusion YOLO for Object Detection in Adverse Weather.....>

论文链接&#xff1a;https://arxiv.org/pdf/2309.08152.pdfhttps://arxiv.org/pdf/2206.01381.pdfhttps://arxiv.org/pdf/2309.08152.pdf 代码链接&#xff1a;https://github.com/DiffPrompter/diff-prompter 目前没有完整代码放出。 恶劣天气下的目标检测主要有以下三种解…

Stable Diffusion系列(三):网络分类与选择

文章目录 网络分类模型基座模型衍生模型二次元模型2.5D模型写实风格模型 名称解读 VAELora嵌入文件放置界面使用 网络分类 当使用SD webui绘图时&#xff0c;为了提升绘图质量&#xff0c;可以多种网络混合使用&#xff0c;可选的网络包括了模型、VAE、超网络、Lora和嵌入。 …

引用jquery.js的html5基础页面模板

本专栏是汇集了一些HTML常常被遗忘的知识&#xff0c;这里算是温故而知新&#xff0c;往往这些零碎的知识点&#xff0c;在你开发中能起到炸惊效果。我们每个人都没有过目不忘&#xff0c;过久不忘的本事&#xff0c;就让这一点点知识慢慢渗透你的脑海。 本专栏的风格是力求简洁…

使用LLaMA-Factory微调ChatGLM3

1、创建虚拟环境 略 2、部署LLaMA-Factory &#xff08;1&#xff09;下载LLaMA-Factory https://github.com/hiyouga/LLaMA-Factory &#xff08;2&#xff09;安装依赖 pip3 install -r requirements.txt&#xff08;3&#xff09;启动LLaMA-Factory的web页面 CUDA_VI…

Java经典框架之Spring MVC

Spring MVC Java 是第一大编程语言和开发平台。它有助于企业降低成本、缩短开发周期、推动创新以及改善应用服务。如今全球有数百万开发人员运行着超过 51 亿个 Java 虚拟机&#xff0c;Java 仍是企业和开发人员的首选开发平台。 课程内容的介绍 1. Spring MVC 入门案例 2. 基…

Redis小记(1)

目录 1.Redis和Mysql的区别 2.Redis常用命令 1.Redis和Mysql的区别 a:mysql和redis的存储方式不同 mysql是关系型数据库&#xff0c;用表来进行存储数据。 redis是通过键值对来存储数据&#xff0c;key使用string来标识&#xff0c;value可以是各种不同的数据结构。 b:mys…

JVS低代码平台:多级菜单配置的详细教程与演示

多级菜单是软件系统一种常见的用户界面设计&#xff0c;它允许用户通过点击或选择不同的菜单项来执行不同的操作或访问不同的功能。多级菜单通常由多个级别的菜单组成&#xff0c;每个级别都包含一组可选择的菜单项。用户可以通过点击或选择菜单项来进入下一级菜单&#xff0c;…

【AI】人工智能本地环境集成安装

目录 1、基础安装 1.1 GPU安装 1.1.1 GPU版本支持 1.1.2 下载CUDA 1.1.3安装CUDA 1.1.4配置环境变量 1.1.5检测CUDA是否安装成功 1.2 CUDNN安装 1.2.1 下载CUDNN 1.2.2 添加配置 1.2.3验证结果 2、pytorch安装

C++设计模式:单例模式(饿汉式、懒汉式)

单例模式是什么&#xff1f; 单例模式是一种创建型的软件设计模式。通过单例模式的设计&#xff0c;使得创建的类在当前进程中只有唯一一个实例&#xff0c;并提供一个全局性的访问点&#xff0c;这样可以规避因频繁创建对象而导致的内存飙升情况。 单例模式有三个要点 私有化…

【MYSQL】MYSQL 的学习教程(七)之 慢 SQL 优化思路

1. 慢 SQL 优化思路 慢查询日志记录慢 SQLexplain 分析 SQL 的执行计划profile 分析执行耗时Optimizer Trace 分析详情确定问题并采用相应的措施 1. 慢查询日志记录慢 SQL 如何定位慢SQL呢&#xff1f; 我们可以通过 慢查询日志 来查看慢 SQL。 ①&#xff1a;开启慢查询日志…

vr虚拟高压电器三维仿真展示更立体全面

VR工业虚拟仿真软件的应用价值主要体现在以下几个方面&#xff1a; 降低成本&#xff1a;通过VR技术进行产品设计和开发&#xff0c;可以在虚拟环境中进行&#xff0c;从而减少对物理样机的依赖&#xff0c;降低试错成本和时间。此外&#xff0c;利用VR技术构建的模拟场景使用方…

蓝桥杯-Excel地址[Java]

目录&#xff1a; 学习目标&#xff1a; 学习内容&#xff1a; 学习时间&#xff1a; 题目&#xff1a; 题目描述: 输入描述: 输出描述: 输入输出样例: 示例 1: 运行限制: 题解: 思路: 学习目标&#xff1a; 刷蓝桥杯题库日记 学习内容&#xff1a; 编号96题目Ex…

Find My文具盒|苹果Find My技术与文具盒结合,智能防丢,全球定位

文具盒&#xff0c;学生用来装钢笔、铅笔、尺子、橡皮等文具的盒子。质地种类很多&#xff0c;一般有木质、铁质、塑料等制品&#xff0c;形状各异&#xff0c;多为长方体形状。文具盒能培养学生的管理能力。使用文具盒的过程就是一个管理自己的过程。每次使用文具之前&#xf…

Android/iOS APP备案流程指南

Android/iOS APP备案流程指南 摘要 本文通过详细介绍了工信部对移动互联网应用程序&#xff08;APP&#xff09;备案的要求&#xff0c;解释了APP备案的定义、时间节点、办理流程以及腾讯云、阿里云的备案流程&#xff0c;最后提供了常见问题的解答。 引言 随着移动互联网的…

docker部署kafka zookeeper模式集群

单机模式链接&#xff1a;https://blog.csdn.net/wsdhla/article/details/133032238 kraft集群模式链接&#xff1a;部署Kafka_kafka 部署-CSDN博客 zookeeper选举机制举例&#xff1a; 目前有5台服务器&#xff0c;每台服务器均没有数据&#xff0c;它们的编号分别是1,2,3,4,5…

博客摘录「 Apollo安装和基本使用」2023年11月27日

一、常见配置中心对比 Spring Cloud Config: https://github.com/spring-cloud/spring-cloud-configApollo: https://github.com/ctripcorp/apolloNacos: https://github.com/alibaba/nacos 对比项目/配置中心 spring cloud config apollo nacos(重点) 开源时间 2014.9 …

Vue使用Element表格Table设置所有单元格内容居中对齐

为单个列的单元格设置居中对齐代码如下&#xff1a; <el-table-columnprop"productInfo.productName"label"中文名"width"100"align"center"></el-table-column>需要设置el-table-column标签里面的属性设置为align"c…

开源分布式搜索引擎ElasticSearch结合内网穿透远程连接

文章目录 前言1. Windows 安装 Cpolar2. 创建Elasticsearch公网连接地址3. 远程连接Elasticsearch4. 设置固定二级子域名 前言 简单几步,结合Cpolar 内网穿透工具实现Java 远程连接操作本地分布式搜索和数据分析引擎Elasticsearch。 Cpolar内网穿透提供了更高的安全性和隐私保…