vue前端页面数据加载添加loading效果

最新推荐文章于 2024-10-22 10:35:42 发布

沃特艾文儿～

最新推荐文章于 2024-10-22 10:35:42 发布

阅读量5.1k

点赞数 4

分类专栏：小技巧以及经验前后端开发 Vue 文章标签： vue loading等待加载效果

本文链接：https://blog.csdn.net/qq_44614115/article/details/114480096

版权

前后端开发同时被 3 个专栏收录

54 篇文章 2 订阅

订阅专栏

小技巧以及经验

51 篇文章 2 订阅

订阅专栏

Vue

24 篇文章 0 订阅

订阅专栏

本文介绍了在前端开发中如何通过Element UI的$loading组件实现上传文件或加载数据时的动态loading效果，包括设置锁屏、文本提示和自定义背景，以及在操作完成后关闭loading并显示反馈消息。

摘要由CSDN通过智能技术生成

在前端上传文件或者加载数据的时候会有一段等待时间，如果加上一个loading效果会减轻用户等待的枯燥，这里就来记录学习一下如何实现loading效果。
在这里插入图片描述

效果大致如下，样式我们是可以自定义的。

具体实现

let thisContent = this;

let loading = thisContent.$loading({
        lock: true,
        text: '上传中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      })

// 中间进行一系列的操作

// 上传成功后关闭loading， 并显示上传成功

loading.close();
thisC.$message('上传文件成功');