Quasar QSkeleton 组件完全指南：用骨架屏提升 Vue 应用的感知性能

前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载QSkeleton 是 Quasar Framework 提供的占位预览组件用于在真实数据加载完成前向用户展示内容结构的骨架轮廓从而提升页面的感知性能。本文基于 Quasar 官方文档与仓库源码系统讲解 QSkeleton 的预定义类型、动画、尺寸与样式控制并给出可直接复用的实战配方模拟 YouTube、Facebook、Twitter、Twitch、表格与列表帮助你快速掌握骨架屏在 Quasar 应用中的落地技巧。什么是 QSkeletonQSkeleton 是一个用于在加载真实页面数据之前展示内容占位预览的 Vue 组件。它向用户预先传递页面将要长什么样的信息在数据尚未完全到达时以渐进方式渲染屏幕内容从而显著提升感知性能perceived performance。它经常与 QInnerLoading、QCircularProgress、QSpinner 以及 Loading、LoadingBar 等加载相关能力搭配使用。在仓库中QSkeleton 的完整实现位于 QSkeleton.js样式定义在 QSkeleton.sass并通过 components.js 注册为 Quasar 全局组件因此可以直接在模板中书写q-skeleton。基础用法在 QCard 中搭建卡片骨架最常见的场景是用 QSkeleton 模拟一张卡片的结构。官方文档的入门示例Card.vue将头像、文本、大图和按钮组合成一个完整的卡片骨架template div classq-pa-md q-card stylemax-width: 300px q-item q-item-section avatar q-skeleton typeQAvatar / /q-item-section q-item-section q-item-label q-skeleton typetext / /q-item-label q-item-label caption q-skeleton typetext / /q-item-label /q-item-section /q-item q-skeleton height200px square / q-card-actions alignright classq-gutter-md q-skeleton typeQBtn / q-skeleton typeQBtn / /q-card-actions /q-card /div /template这段代码展示了 QSkeleton 的核心用法每种内容形态用对应type的骨架块占位再配合height、square等属性微调细节。默认情况下 QSkeleton 的动画为wave用户看到的是一个带有流动光效的占位轮廓。预定义类型QSkeleton 提供了三类基本形状与多种便捷类型。从源码 QSkeleton.js 可以看到type属性的合法值由skeletonTypes数组校验export const skeletonTypes [ text, rect, circle, QBtn, QBadge, QChip, QToolbar, QCheckbox, QRadio, QToggle, QSlider, QRange, QInput, QAvatar ]基本类型text文本行默认被垂直压缩为一半高度模拟文字行、rect矩形也是组件默认值、circle圆形。便捷类型以 Quasar 组件命名的类型会精确匹配对应组件的尺寸与圆角例如QBtn、QBadge、QChip、QToolbar、QCheckbox、QRadio、QToggle、QSlider、QRange、QInput、QAvatar。这些类型的默认尺寸定义在 QSkeleton.sass 中例如QBtn为 90×36px、QChip为 90×28px 且圆角 16px、QAvatar/circle为 48×48px 且圆角 50%、QInput高 56px、QToolbar高 50px、QToggle为 56×40px 圆角 7px、QCheckbox/QRadio为 40×40px 圆形。文档示例Types.vue遍历全部 14 种类型每种类型放在一张卡片中渲染。注意type属性带有 validator 校验传入未定义的类型会在开发环境得到警告。动画QSkeleton 内置 7 种动画源码中的skeletonAnimations数组QSkeleton.js定义了合法值export const skeletonAnimations [ wave, pulse, pulse-x, pulse-y, fade, blink, none ]动画值效果底层实现QSkeleton.sasswave默认一道高光从左侧划过模拟水波扫过通过:after伪元素叠加白色渐变执行q-skeleton--wave的 translateX 位移动画pulse整体缩放呼吸scale 1 → 0.85q-skeleton--pulsekeyframespulse-x仅横向缩放scaleX 1 → 0.75q-skeleton--pulse-xkeyframespulse-y仅纵向缩放scaleY 1 → 0.75q-skeleton--pulse-ykeyframesfade透明度 1 → 0.4 循环渐变q-skeleton--fadekeyframesblink白色遮罩整体淡入淡出模拟闪烁:after叠加半透明白色遮罩并复用 fade 动画none无动画组件不会添加q-skeleton--anim类参见 QSkeleton.jswave、blink以及源码中预留的pop类动画都依赖:after伪元素因此会为元素设置position: relative; overflow: hidden; z-index: 1。所有动画的时长由 CSS 变量--q-skeleton-speed控制默认 1500ms在 QSkeleton.sass 中定义。animationString 类型默认wave接受上表任意值有 validator 校验。animation-speedString 或 Number 类型默认1500毫秒。组件会将它写成内联 CSS 变量--q-skeleton-speed: 1500ms见 QSkeleton.js因此设置animation-speed750即可让动画快一倍。这一行为在 QSkeleton.test.js 中有测试覆盖。文档示例Animations.vue遍历全部动画值逐一展示。测试用例 QSkeleton.test.js 也验证了animationnone时不会出现q-skeleton--anim类其余动画都会追加对应的q-skeleton--anim-{name}类。尺寸控制QSkeleton 提供三个尺寸相关属性Sizing.vue 展示了典型用法属性类型默认值说明sizeString—同时设置宽和高正方形占位widthString—单独设置宽度heightString—单独设置高度从源码QSkeleton.js可以看到其优先级逻辑当size有值时宽高都取size否则分别取width与height最终以内联样式输出。另外QSkeleton.sass 为组件设置了box-sizing: border-box确保加上边框后尺寸不会膨胀。q-skeleton typecircle size100px / q-skeleton width150px / q-skeleton height150px / q-skeleton size50px / q-skeleton width200px height100px /样式定制Bordered带边框bordered布尔属性为骨架添加 1px 细边框浅色主题为rgba(0,0,0,.05)见 QSkeleton.sass让占位块轮廓更清晰。示例 StylingBordered.vueq-skeleton bordered typecircle / q-skeleton bordered / q-skeleton bordered square /Square直角square布尔属性把圆角重置为 0border-radius: 0见 QSkeleton.sass适合卡片头部横幅、媒体区等直角场景。示例 StylingSquare.vue。自定义颜色QSkeleton 的基础背景色使用 Quasar 的$separator-color分隔线色深色模式下自动切换为rgba(255,255,255,.05)见 QSkeleton.sass。你可以直接复用 Quasar 的颜色工具类覆盖背景色示例 StylingColor.vueq-skeleton classbg-accent typecircle / q-skeleton classbg-teal / q-skeleton classbg-orange animationpulse-y / q-skeleton classbg-indigo /自定义边框与圆角占位块本身就是普通元素完全可以通过自定义 CSS 覆盖样式。示例 StylingCustomBorder.vue 展示了如何用 SASS 类同时改写圆角和边框颜色template div classq-pa-md q-skeleton width100px height50px classcustom-skeleton-border / /div /template style langsass .custom-skeleton-border border-radius: 10px 0 24px 4px border: 1px solid #aaa /style深色模式darkQSkeleton 通过 Quasar 的useDarkcomposable 自动感知深色模式QSkeleton.js渲染时添加q-skeleton--dark或q-skeleton--light类。深色主题下背景、边框和 wave/blink 动画遮罩都会自动使用更柔和的白色透明值见 QSkeleton.sass无需额外处理即可适配暗色 UI。实战配方Recipes文档提供了 6 组精心编排的配方示例可以直接拷贝进项目按需改造模拟 YouTube 卡片来自 RecipeYoutube.vue顶部 150px 高的直角媒体区下方叠加标题行与两行副标题文本并用width50%制造长短不一的自然观感q-card flat stylemax-width: 300px q-skeleton height150px square / q-card-section q-skeleton typetext classtext-subtitle1 / q-skeleton typetext width50% classtext-subtitle1 / q-skeleton typetext classtext-caption / /q-card-section /q-card模拟 Facebook 动态来自 RecipeFacebook.vue头像 标题 200px 媒体区 正文行整组统一使用animationfade营造更安静的加载氛围q-card flat bordered stylemax-width: 300px q-item q-item-section avatar q-skeleton typeQAvatar animationfade / /q-item-section q-item-section q-item-labelq-skeleton typetext animationfade //q-item-label q-item-label captionq-skeleton typetext animationfade //q-item-label /q-item-section /q-item q-skeleton height200px square animationfade / q-card-section q-skeleton typetext classtext-subtitle2 animationfade / q-skeleton typetext width50% classtext-subtitle2 animationfade / /q-card-section /q-card模拟 Twitter 推文来自 RecipeTwitter.vue头像 文本行 150px 配图 一排操作按钮评论、转发、点赞操作按钮用灰色QIcon加 30px 宽的文本骨架模拟图标与计数。模拟 Twitch 直播间来自 RecipeTwitch.vue170px 视频区 56px 方形头像 三行文本全部使用square直角与animationfade并通过height12px、width75%精细控制文本行高度与宽度。模拟数据表格来自 RecipeTable.vue在QMarkupTable中表头 6 列使用animationblink typetext的骨架表体用v-forn in 5循环渲染 5 行、每列宽度各异的骨架文本85px、50px、35px…是最贴合后台管理页的表格加载方案。模拟列表来自 RecipeList.vue三条QItem均由QAvatar圆头像加两行文本组成第二行文本宽度依次为 65%、90%、35%形成错落有致的列表观感。无障碍Accessibility自 v2.25 起官方文档明确了 QSkeleton 的无障碍定位它只是一个装饰性占位本身不携带任何 ARIA 语义——屏幕阅读器扫过骨架屏时只会看到一堆空的、未标记的盒子。因此推荐两种处理方式对骨架屏容器设置aria-hiddentrue让辅助技术直接忽略它或者对加载区域本身设置aria-busytrue向辅助技术传达该区域尚未就绪的状态待真实内容渲染后移除该属性。同时从源码QSkeleton.js可以看出组件把默认插槽内容通过hSlot渲染出来因此你可以在骨架内部放入兜底内容再加上渲染时q-skeleton--anim类会设置cursor: waitQSkeleton.sass向鼠标用户传递正在加载的视觉提示。与加载相关组件的配合QSkeleton 常与 Quasar 的其他加载能力组合使用数据到达前先用骨架屏撑起布局请求过程中用 QInnerLoading 或 QSpinner 表达局部忙碌全局进度可用 Loading 插件或顶部的 LoadingBar对于圆形区域也可以考虑 QCircularProgress 的 indeterminate 模式。骨架屏负责告知用户内容结构其余组件负责告知用户加载进度两者互补。小结QSkeleton 是一个零依赖、纯 CSS Vue 渲染的轻量组件14 种预定义类型、7 种动画、3 个尺寸属性与square/bordered/dark开关构成了完整的占位能力配合自定义类即可覆盖任意视觉需求。其实现细节类型与动画的校验数组、--q-skeleton-speed变量、box-sizing: border-box的尺寸策略、深浅色双主题均可分别在 QSkeleton.js、QSkeleton.sass 与 QSkeleton.test.js 中查阅验证。在接入真实数据时配合v-if/v-else在骨架与真实内容间切换即可用极少的代码获得流畅的加载体验。赞分享前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载相关推荐终极指南ZK Bug Tracker如何成为零知识证明安全的守护者终极指南ZK Bug Tracker如何成为零知识证明安全的守护者 ZK Bug Tracker作为社区维护的零知识证明ZK安全漏洞数据库是开发者、审计LovyanGFX高级应用EPD电子纸与HUB75 LED屏驱动实战LovyanGFX高级应用EPD电子纸与HUB75 LED屏驱动实战 LovyanGFX是一款专为ESP32、ESP8266等嵌入式设备设计的高性能SPI L嵌入式图形学Hyperapp视图与组件设计条件渲染、key与组件拆分的6个最佳实践Hyperapp视图与组件设计条件渲染、key与组件拆分的6个最佳实践 Hyperapp 是一个仅约 1kB 的 JavaScript 框架用于构建超文本应前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考