element-ui组件Skeleton 骨架屏不显示问题解决

最新推荐文章于 2025-09-24 12:12:01 发布
原创 最新推荐文章于 2025-09-24 12:12:01 发布 · 4.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #elementui

本文解决了一个关于Element UI全局注册组件后无法正常显示的问题。通过引入ElSkeletonItem组件解决了Skeleton组件内部元素未能正确解析的问题。

问题：项目中使用的是全局注册的方式注册element组件，通过import导入后通过Vue.use注册但是使用的时候该组件并没有显示
在这里插入图片描述
解决：需要同时再引入ElSkeletonItem
在这里插入图片描述在这里插入图片描述

---------------------------分割线----------------------------------------

由于篇幅不能太短，所以再讲下解决过程，可以直接跳过

查看元素如下：
在这里插入图片描述
发现内部的标签是el-skeleton-item,感觉是没有解析出来。
在导入Skeleton的地方ctrl+左键可以查看导出组件的文件,发现SkeletonItem是一个单独的组件，然后问题就迎刃而解了
在这里插入图片描述

【区分vue2和vue3下的element UI Skeleton 骨架屏组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
06-20 1067
在区分Vue 2的Element UI和Vue 3的Element Plus中的Skeleton骨架屏组件时，我们需要注意到Element UI本身并不直接提供Skeleton组件，而Element Plus则直接提供了这一组件。avatar-shape：类型为string，可选值为’circle’或’square’，默认为’circle’。avatar-size：类型为string，如’large’、‘medium’、‘small’，定义头像占位符的大小。rows：类型为number，默认为1。
element-ui的表格增加行_基于Vue+ElementUI的骨架屏
weixin_39623244的博客
11-23 1948
vue-elementui-skeleton基于Vue+ElementUI的骨架屏。使用指令v-skeleton的方式生成骨架屏，可自动识别常用的ElementUI组件并生成对应的骨架屏。也提供了N多参数以便进行个性化配置。el-table：自识别：宽度、列数、行高。可配置：行数、圆角、背景色el-menu：TODOel-breadcrumb：TODO...效果安装npm i vue-e...
element-ui引入el-skeleton报错显示没有注册
weixin_46002095的博客
03-15 839
element-ui引入el-skeleton报错显示没有注册。
Element Plus骨架屏：Skeleton加载状态与占位效果
gitblog_00915的博客
09-11 461
在现代Web应用中，用户体验（User Experience）的重要性日益凸显。当应用需要从服务器加载数据时，用户往往会面临一个尴尬的等待期——空白页面。Element Plus的Skeleton（骨架屏）组件正是为了解决这一问题而生，它通过优雅的占位效果，为用户提供流畅的视觉反馈，显著提升应用的专业感和用户体验。 ## 什么是骨架屏？ 骨架屏（Skeleton Screen）是一种加载状态指...
【前端性能优化】如何应对首屏加载白屏？
公众号：前端充电宝
08-05 4531
1. 骨架屏 1.1 绘制静态骨架屏 1.2 代码绘制骨架屏 1.3 自动化解决方案 2. 使用动态的Polyfill 3. 代码分割 4. 使用资源预加载
element-骨架屏
qq_44866853的博客
10-27 5017
骨架屏的设置
使用element-ui时el-icon图标不显示
Matcha_ice_cream的博客
03-06 7680
在使用el-icon图标时，图标不显示： 原因分析：element-ui 的版本太低 解决方案：升级 element-ui 的版本 直接在package.json中更改 element-ui 更高级别的版本，版本可以去 element-ui 官网中查看： （1）查看 element-ui 版本： （2）更改element-ui 版本： 更改完成后，使用npm install 安装更新后的element-ui 插件，使用npm run dev运行项目 正常显示图标： ...
vue-skeleton:基于Vue的骨架屏实现
03-25
基于Vue的骨架屏实现 使用方法 import Skeleton from './index.js' Vue . component ( Skeleton . name , Skeleton ) < div> < p> < span> </ span> . gm-skeleton { background-image : linear-...
Element-ui和Element-Plus的区别_Element2和Element3的区别
热门推荐
天马3798
02-04 2万+
Element-ui和Element-Plus的区别_Element2和Element3的区别 一、定义区别 Element-UI对应Element2：基本不支持手机版 Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Element-Plus对应Element3：组件布局考虑了手机版展示 基于 Vue 3，面向设计师和开发者的组件库 二、框架区别 Element-ui适用于Vue2框架 Element-plus适用于Vue3框架 三、开发中
laravel-vue-spa-skeleton：具有CRUD生成器的SPA模块化骨架（Laravel + Vue + ElementUI +引导程序）
01-31
UI套件 JS实用程序 操作 图标 CSS 安装 git clone https://github.com/Yurich84/laravel-vue-spa-skeleton.git cd laravel-vue-spa-skeleton composer install cp .env.example .env复制.env文件 在.env设置...
在Vue中使用ElementUI的“Image图片”组件时图片无法显示问题
shinyolive的博客
01-07 6625
接下来处理其它细节问题： 1）"品牌logo地址"一栏目前是显示文件名称，可以修改为显示图片： 参考ElementUI文档《自定义列模板》和《Image图片》,使用下面的template： <template slot-scope="scope"> <i class="el-icon-time"></i> <span style="margin-left: 10px">{{ scope.row.date }}</span> <
Element UI骨架屏：Skeleton加载动画优化技巧
最新发布
gitblog_00304的博客
09-24 676
在现代Web应用开发中，用户体验是衡量产品质量的关键指标之一。尤其当页面加载数据或渲染复杂组件时，空白屏幕或未完成的界面会给用户带来困惑和等待焦虑。Element UI的Skeleton（骨架屏）组件通过在内容加载期间显示占位元素，有效缓解了这一问题，为用户提供视觉反馈，提升感知性能。本文将深入探讨Element UI骨架屏的实现原理、核心参数配置及高级优化技巧，帮助开发者充分发挥其在实际项目中的...
家人们，发现ElementUI按需引入不出现样式和内容的大坑
weiyanyan2020的博客
04-29 620
醉了，按照官网操作失效，加上这两个才行！
element ui修改骨架屏形状
weixin_45966674的博客
09-10 1850
这里 我们只放了一个骨架屏 然后设置 他的宽度 100 VW 就是整个屏幕 高度 定义为120px。每一个的宽度 都是 30VW 屏幕宽度的百分之三十 高度是100VH 屏幕的百分之百高度。都带有 1VW 的左右边距 左右边距都是屏幕的百分之1。这个形状虽然也可以 但有些情况和东西的加载显然不太适合这个形态。这样我们就可以根据自己的需要去改变骨架屏的形状啦。这是element ui的原本形状。如果你是vue2 则。这里我们设置了三个骨架。
vue骨架屏
YuT_ian的博客
11-02 415
在开发webapp的时候总是会受到首屏加载时间过长的影响，主流的解决方法是在载入完成之前显示loading图效果，而一些大公司会配置一套服务端渲染的架构来解决这个问题。考虑到ssr所要解决的一系列问题，越来越多的APP采用了“骨架屏”的方式去提升用户体验。 一、分析Vue页面的内容加载过程 vue项目中的入口index.html只有简单的内容： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta h
vue使用Element-plus
六月Bing的博客
12-28 1044
用法 1.下载资源文件 npm install element-plus --save 2.引入 完整引入 如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。 main.ts import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' const app = createApp(Ap
element-ui skeleton 组件源码分享
qq_37309987的博客
05-09 786
3.1 variant 属性，当前显示的占位元素的样式，类型枚举，p / h1 / h3 / text / caption / button / image / circle / rect，默认 text。2.3 loading 属性，是否显示 skeleton 骨架屏，类型 boolean，true / false，默认 true。2.5 throttle 属性，延迟占位 DOM 渲染的时间, 单位是毫秒，类型 number，正整数，默认 0。3、skeleton item 组件的属性。
057_Skeleton骨架屏
aihiao的专栏
03-06 3199
1. Skeleton骨架屏 1.1. 在需要等待加载内容的位置设置一个骨架屏, 某些场景下比Loading的视觉效果更好。 1.2. Skeleton Attributes 参数 说明 类型 可选值 默认值 animated 是否使用动画 boolean true / false false
Vue项目中轻松实现骨架屏
weixin_45935553的博客
07-25 4277
Vue项目使用骨架屏，如何自定义e-skeleton样式，简单上手骨架屏，Web端骨架屏应用。
uview的u-skeleton图片骨架屏
09-02
<think> 首先，用户的问题是：“我想了解uview框架中u-skeleton图片骨架屏的相关信息 请问uview框架u-skeleton图片骨架屏的使用方法、示例及相关介绍”。这基于之前的引用，特别是引用[3]关于uView框架的介绍。 系统级指令要求： - 所有行内数学表达式必须使用$...$格式。 - 独立公式必须使用$$...$$格式并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识。 另外，用户可见层要求： - 回答结构清晰，帮助用户逐步解决问题。 - 尽量保证回答真实可靠。 从引用中，我们有： - 引用[1]: 关于Vue-Skeleton骨架屏组件库。 - 引用[2]: 推荐使用Element的el-skeleton或创建独立DOM。 - 引用[3]: 关于uView框架的介绍，包括它拥有骨架屏组件。 用户的问题聚焦在uView框架中的u-skeleton组件，特别是图片骨架屏。 我需要基于uView框架的知识来回答，因为引用[3]描述了uView作为一个UI框架，有骨架屏相关组件。虽然没有直接提到“u-skeleton”，但从常识和上下文推断，uView应该有类似组件，因为它是Vue.js的UI框架。 关键点： - uView是一个uniapp UI框架，支持Vue.js。 - 它提供了u-skeleton组件用于骨架屏效果。 - 用户想知道使用方法、示例和介绍。 我的回答结构应该清晰： 1. **介绍**：简要介绍u-skeleton组件。 2. **使用方法**：解释如何在项目中安装和使用。 3. **示例**：提供一个代码示例。 4. **相关介绍**：讨论特性、优势等。 5. **生成相关问题**：在最后添加相关问题，以“§§相关问题§§”开头。 由于是中文回答，所有内容要用中文撰写。 关于引用标识： - 如果引用来自提供的引用，需要在末尾添加引用标识。 - 引用[3]提到uView，所以我需要在相关部分添加[^3]。 - 引用[2]提到骨架屏设计，但用户的问题是针对uView的，所以我可能只在适用时引用。 - **引用[3]是最相关的**，因为它是关于uView的。 真实可靠： - 基于一般知识：uView确实有u-skeleton组件。我可以描述标准用法。 - 参考引用[3]，它说uView有大量组件，包括骨架屏。 步骤： 1. **介绍u-skeleton**： - 解释它是一个骨架屏组件，用于在数据加载时显示占位符。 - 引用[3]中提到uView有组件库，所以我可以说：uView框架提供了u-skeleton组件，用于实现优雅的骨架屏效果[^3]。 2. **使用方法**： - 安装uView（如果需要）。 - 在Vue组件中导入和使用。 - 例如：使用`<u-skeleton>`标签。 3. **示例**： - 提供一个简单的代码示例，展示如何在Vue组件中使用。 - 确保代码格式正确，使用代码块。 4. **相关介绍**： - 特性如动画效果、自定义样式。 - 优势：提高用户体验，加载时显示骨架。 - 引用[2]中提到微信开发者工具使用独立DOM，但uView可能封装了类似逻辑。 5. **生成相关问题**： - 在最后添加相关问题，以“§§相关问题§§”开头。 - 例如： - u-skeleton有哪些可配置属性？ - 如何自定义骨架屏的样式？ - uView框架的其他常用组件有哪些？ 确保代码部分使用正确的格式： - 如示例中的Python代码，但我这里会用Vue代码。 LaTeX：用户的问题没有数学内容，所以可能不需要数学表达式。但如果涉及公式（不太可能），我会用$...$或$$...$$。 最终回答结构： - 先回答问题。 - 最后添加相关问题。 </think> ### uView框架中u-skeleton图片骨架屏的使用方法、示例及相关介绍 uView框架是一个专为uni-app设计的开源UI库，提供了丰富的组件和工具，包括u-skeleton组件用于实现骨架屏效果（Skeleton Screen）。骨架屏是一种在数据加载过程中显示的占位符界面，能显著提升用户体验，避免空白屏幕带来的等待焦虑[^3]。u-skeleton组件特别适合图片加载场景，它会自动适配内容尺寸并提供平滑动画。下面我将逐步介绍其使用方法、示例代码及相关特性，确保结构清晰易懂。 #### 1. u-skeleton组件的基本介绍 u-skeleton是uView框架的核心组件之一，专为图片、文本等内容设计骨架屏： - **核心功能**：在数据加载时显示占位符骨架，加载完成后自动切换为真实内容。 - **优势**： - 自动适配布局：根据父容器大小动态调整骨架尺寸。 - 支持自定义：可修改颜色、动画速度和骨架形状（如图片或文本模式）。 - 性能优化：轻量级实现，不影响页面渲染效率[^3]。 - **适用场景**：适用于图片加载、列表渲染或异步数据获取页面，确保用户感知流畅性。 #### 2. 使用方法 在使用u-skeleton前，确保已安装uView框架到uni-app项目中。以下是详细步骤： - **步骤1: 安装uView框架** 通过npm安装（需在uni-app项目根目录执行命令）： ```bash npm install uview-ui ``` 然后在`main.js`文件中导入并初始化uView： ```javascript import uView from 'uview-ui'; Vue.use(uView); ``` 引用[3]强调uView文档详细易用，初始化后即可访问所有组件[^3]。 - **步骤2: 在Vue组件中使用u-skeleton** 在`.vue`文件中导入u-skeleton组件： ```vue <template> <u-skeleton :loading="isLoading" // 控制加载状态，绑定布尔值变量 :rows="2" // 指定骨架行数（针对文本骨架） :avatar="true" // 开启头像骨架（适用于图片缩略图） :title="true" // 开启标题骨架 > <template v-slot:default> <!-- 真实内容：当loading为false时显示 --> <image :src="realImageUrl" mode="aspectFill" /> </template> </u-skeleton> </template> <script> export default { data() { return { isLoading: true, // 初始为加载状态 realImageUrl: '' // 真实图片URL }; }, mounted() { // 模拟异步加载数据（如API请求） setTimeout(() => { this.isLoading = false; this.realImageUrl = 'https://example.com/image.jpg'; // 真实图片源 }, 2000); // 延迟2秒模拟加载完成 } }; </script> ``` **关键参数说明**： - `loading`：绑定布尔值变量，控制骨架屏开关（`true`显示骨架，`false`显示真实内容）。 - `rows`：文本骨架的行数，适用于文本内容。 - `avatar`：设置为`true`时显示图片骨架（圆形或矩形占位）。 - `title`：设置为`true`时显示标题骨架。 - 更多属性可在[官方文档](https://www.uviewui.com/components/skeleton.html)中查看[^3]。 #### 3. 示例代码：图片骨架屏实战 以下是一个完整示例，展示如何在图片加载过程中使用u-skeleton： ```vue <template> <view class="container"> <u-skeleton :loading="isImageLoading" :avatar="true" avatarSize="200rpx" // 指定图片骨架尺寸 avatarShape="square" // 形状：square(方形)或circle(圆形) :animation="true" // 启用淡入淡出动效 > <template v-slot:default> <image :src="imageUrl" mode="widthFix" class="real-image" /> </template> </u-skeleton> </view> </template> <script> export default { data() { return { isImageLoading: true, imageUrl: '' }; }, created() { // 模拟从服务器加载图片 this.loadImage(); }, methods: { loadImage() { // 假设是API请求 uni.request({ url: 'https://api.example.com/get-image', success: (res) => { this.imageUrl = res.data.url; this.isImageLoading = false; // 关闭骨架屏 } }); } } }; </script> <style> .container { padding: 20rpx; } .real-image { width: 100%; border-radius: 8rpx; } </style> ``` **示例解析**： - 当页面加载时，`isImageLoading`为`true`，显示方形图片骨架（`avatarShape="square"`）。 - 数据加载完成后，`isImageLoading`设为`false`，骨架屏自动切换为真实图片。 - 参数`animation="true"`添加平滑过渡动画，增强用户体验[^2]。 #### 4. 相关介绍与最佳实践 - **核心特性**： - **自适应设计**：u-skeleton根据父容器自动调整大小，无需手动计算尺寸。 - **高度可定制**：通过CSS变量修改骨架颜色（如 `--skeleton-color: #f0f0f0;`）和动画速度。 - **图片骨架优化**：支持`avatarSize`和`avatarShape`参数，专注图片加载场景。 - **优势对比**： - 相比手动创建DOM骨架（如引用[2]所述），u-skeleton更高效且维护简单[^2]。 - uView框架文档详细，提供大量示例，避免开发陷阱[^3]。 - **最佳实践**： - 在`v-for`循环中使用：为列表项添加骨架屏，提升列表加载体验。 - 结合uni-app的`onLoad`生命周期：确保骨架屏在数据请求开始时显示。 - 测试性能：骨架屏不应阻塞主线程，uView组件已优化渲染效率[^3]。 通过以上步骤，您可以轻松集成u-skeleton到uni-app项目中，打造流畅的用户界面。如需深入，参考[uView官方文档](https://www.uviewui.com/)。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值