vue 项目中使用v-loading实现加载效果

最新推荐文章于 2024-03-20 10:18:19 发布
最新推荐文章于 2024-03-20 10:18:19 发布
阅读量9.1k 收藏 9
点赞数 6
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yang_guang3/article/details/114929435
版权

当在vue项目中请求后台接口时，常常会使用 loding 过渡数据的加载时间。
如果 loading 作为一个全局的加载状态，应该写在项目中的App.vue中
在el-table标签中添加v-loading=“loading”
在这里插入图片描述
data层添加该变量：
在这里插入图片描述

在接口请求前后添加如下：
在这里插入图片描述
给后台接口打个断点测试下效果如下：
在这里插入图片描述

Rsun04551
关注
  • 6
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue-loading:用于在客户端请求时阻塞
08-04
Vuejs 加载屏幕 用于阻止客户端处理的工作。 请查看以查看它的外观。 安装 npm i --save vuejs-loading-screen 用法 import Vue from 'vue' import loading from 'vuejs-loading-screen' Vue . use ( loading ) < template> < h1>Welcome to VueLoading Screen</ h1> </ template> < script > export default { methods : { sendHttpRequest () { this . $isLoading ( true ) // show loading screen this . $axios . post (u
自定义vue的loading插件
08-12
本插件用于vue2.x,自定义了一个钩子(asyncMethods)(会自动合并进methods钩子)，用来放置异步函数可以获取各种接口请求，异步函数的loading状态，配合其他更具状态显示loading的组件（例如elementui的v-loading指令）效果显著
【v-loading】vue3自定义指令v-loading的封装，预制菜可直接食用
最新发布
zero77ld的博客
03-20 221
vue3+ts自定义指令封装，预制菜可直接食用
element-ui中el-image加载图片自定义loading
dabaooooq的博客
11-24 2363
element-ui中el-image加载图片自定义loading
vue写的confirm确认框，loading加载中，message提示消息
12-06
vue写的confirm确认框，loading加载中，message提示消息 在vue的模板里引用 import message from './tips/message/index'; import confirm from './tips/confirm/index'; import loading from './tips/loading/index'; 使用comfirm需要在template中这样定义 {{inportExcelMsg}} 确定 使用message可以这样定义 //显示提示信息 showMessage:function(msg){ message.installMessage({ message: msg, time: 3000 }); } 使用loading可以在指定的div上这样定义： v-kiko-loading="loading" 使用loading变量来控制显示和隐藏
Vue全局loading及错误提示的思路与实现
12-09
前言 近期项目马上上线，前两天产品提个需求，加个全局loading，我这半路出家的vue选手，有点懵逼，这玩意还是第一次，但是作为一个初级的前端切图仔，这个东西是必须会的，花了五分钟思考了一下，然后动键盘码出来 ，今天总结一下，与各位分享交流，有错误还请各位指出。 思路 我们项目请求使用的是axios，那么我们就在请求前后进行拦截，添加我们需要的东西，然后通信控制loading，通信方式我就不写了，有个老哥写的不错，可以去看看传送门 代码实现 首先对axios进行封装 如果你想进行全局错误提醒 也可以在拦截的代码进行操作 具体代码看下面 /** * axios 配置模块 * @m
Vuetify——loading效果
月来better
11-25 1046
<v-progress-circular indeterminate color="primary" style="position:absolute;top:20%;left:50%;margin-left:-16px;" ></v-progress-circular>
实现一个异步带Loading的控件组件
KOBE24forever的博客
03-10 722
带异步状态的组件实现
vue下拉加载插件 之vue-infinite-loading
黑山老妖的小站
11-30 2830
假设你的项目已经可以正常运行 (1) 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org     （安装插件有时需要翻墙，为了避免这种情况我直接安装了淘宝镜像 ）  (2) 安装插件 cnpm install --save vue-infinite-loading (3) 在需要的页面中引入vue-in
vue使用element组件自定义v-loading
Billow_lamb的博客
02-26 1748
vue使用element组定义v-loading 文件夹目录 src文件夹下面的directive.js import Vue from 'vue'; import Loading from './loading.vue'; import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom'; import { PopupManager } from 'element-ui/src/utils/popup'; import
vue局部刷新loading加载封装
weixin_46054723的博客
05-09 421
vue局部刷新。1、封装loading.js。2、使用loading.js。
vue2-form-loading:VueJS指令可与表单一起使用，以禁用提交按钮并使提交后的每个输入均为只读
05-11
vue2表单加载 VueJS指令可与表单一起使用，以禁用提交按钮并使提交后的每个输入均为只读 安装 npm install --save vue2-form-loading 用法 import Vue from 'vue' import formLoading from 'vue2-form-loading' Vue . use ( formLoading ) 基本形式 < form v-loading action =" ... " method =" post " > < input type =" text " name ="" value ="" > < input type =" submit " value =" Send " > </ form > 使用自定义加载文本 < form v-loading =" 'loading...' " action =" ..
vue-friendly-iframe-一个Vue js组件，用于创建超快速加载，无阻塞的iframe。-Vue.js开发
05-27
vue-friendly-iframe基于Aaron Peter的文章，用于创建动态异步iframe的Vue js组件：http://www.aaronpeters.nl/blog/iframe-loading- vue-friendly-iframe Vue js组件，用于基于以下内容创建动态异步iframe：亚伦·彼得（Aaron Peter）的文章：http://www.aaronpeters.nl/blog/iframe-loading-techniques-performance?>#dynamic文档https://nzlt.github.io/vue-friendly-iframe演示https：// nzlt .github.io / vue-friendly-iframe要求Vue.js（^ v2.1.4）安装Vue支持在Vue> = 2上的安装和使用npm install vue-friendly-iframe --save-dev从'vue导入VueFriendlyIframe
VUE2局部触发全局loading（provide/inject）
Cxiaomu的博客
09-21 171
当前有个需求，是路由内部某个组件发生某些操作时，开启/关闭全局（整个页面）的loading效果。在收到这个需求时，考虑到关键点在于跨组件通信，于是想到以下这些方法并进行分析可行性，props、$emit、Event Bus 、Vuex、provide、inject、slots、Ref / Reactive、useAttrs、Pinia，通过以上分析，认为provide/inject的方式比较方便快捷（更熟悉），于是通过此方式实现。
ElementPlus 源码学习之 el-image 的基本实现思路
qq_39559879的博客
04-05 5808
el-image 的基本功能有： 加载中占位 加载失败占位 加载成功显示图片 图片懒加载 先考虑加载占位的情况，我们不难发现加载有成功、失败、加载中这三种状态，由于加载成功这个状态可以视为其他两种状态的排除，所以实际上我们只需要定义两个状态： // 默认为加载中状态 loading = ref(true); // 默认加载没有出错 error = ref(false); 然后提供插槽让用户可以自定义加载中和出错的图片占位： <template> <slot v-if="load
vue 实现全局使用的loading组件（使用Vue.extend）
东扯葫芦西扯瓜——前端小菜鸟的博客
06-13 1294
vue 实现全局使用的loading组件（使用Vue.extend） 在开发中，如果项目比较复杂，那么页面加载往往会有一个小空白时间。当然了，页面加载速度这些我们必须要去优化。但若有时候网络不好了什么的，总之免不了会出现白屏。为了不让用户的内心在这段时间内过于寂寞，我们往往需要给页面加上 loading 小圈圈，告诉用户：我们正在努力拽数据呢，亲，稍等哈~~ 实现思路 其实，写个loadign页面很简单，关键的是如何让使用起来更简单。 思路一：可能我们一开始最容易想起来的就是，吧loading抽成一个组件，
vue element Loading加载事件的使用
tianshangfeiya的博客
04-13 2353
查询数据时使用一般般需要的功能都是在数据还没加载出来的时候，显示加载动画，也就是：tableLoading 设置为 true，待数据加载完成之后在设置 tableLoading 为 false。2.父组件引用:loading=“tableLoading”element-loading-text=“加载中”1.子组件el-table中加入 以下代码。data数据中放入变量。Loading 加载。
vue中加全局loading并添加自定义加载语
weixin_37582804的博客
04-02 3375
首先在模板页最外层标签添加绑定 < template v-loading=“loading”> 导入 import {Loading} from ‘element-ui’ 定义字段初始值： loading: false 加载调用 startLoading() { this.loading =Loading.service({ lock: true, // text: ‘加载中倒计时：...
基于Element-UI给Vue页面添加Loading效果
DZQ1223的博客
06-08 3296
基于Element-UI给Vue页面添加Loading效果1、引入2、在标签里面添加v-loading3、在data中定义4、调用后端接口之前设置true，返回数据画图后设置false 1、引入 import { Loading } from 'element-ui' 2、在标签里面添加v-loading <div v-loading="loadLoading" id="chart-load" class="chart-load"></div> 3、在data中定义 export
php无限加载,使用vue-infinite-loading实现无限加载功能
06-07
好的，我可以为您提供关于使用vue-infinite-loading实现php无限加载的一些指导。 首先，您需要安装vue-infinite-loading。可以通过npm或yarn安装，具体操作为： ``` npm install vue-infinite-loading --save ``` 或 ``` yarn add vue-infinite-loading ``` 安装完成后，在您的Vue组件中引入该组件： ```javascript import InfiniteLoading from 'vue-infinite-loading'; export default { components: { InfiniteLoading, }, }; ``` 接下来，您需要在组件的template中使用该组件，并在data中定义需要加载的数据列表和当前页码： ```html <template> <div> <ul> <li v-for="item in list" :key="item.id">{{ item.title }}</li> </ul> <infinite-loading @infinite="infiniteHandler"></infinite-loading> </div> </template> <script> export default { data() { return { list: [], page: 1, }; }, methods: { infiniteHandler($state) { // 这里使用ajax请求获取数据，page为当前页码 axios.get('/api/list', { params: { page: this.page, }, }).then((res) => { if (res.data.length > 0) { this.list = this.list.concat(res.data); this.page += 1; $state.loaded(); } else { $state.complete(); } }); }, }, }; </script> ``` 在上面的代码中，我们使用axios发送ajax请求获取数据，并在请求成功后使用concat方法将新数据追加到原数据列表中。同时，我们使用$state.loaded()方法告诉vue-infinite-loading组件数据已经加载完毕，可以继续加载下一页数据。如果返回的数据为空，则使用$state.complete()方法告诉vue-infinite-loading组件数据已经全部加载完毕。 最后，您需要在样式中设置vue-infinite-loading组件的高度和样式： ```css .vue-infinite-loading { height: 60px; line-height: 60px; text-align: center; } ``` 这样就完成了使用vue-infinite-loading实现php无限加载的操作。希望以上内容能够对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rsun04551

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值