【Vue+Element UI】关闭指定某一个页面的loading动画

模板：vue-admin-template v4.4.0

问题描述：由于vue-admin默认配置了全局loading，所以页面刷新都会有loading加载动画，具体显示效果如下：

但实际中需要在某一个页面中定时请求接口、刷新页面数据，在使用setInterval()定时器后，页面在每次请求接口后会出现loading加载动画。故需要关闭该页面的加载动画。

过程：查到的大部分博客的关注点都在于如何开启loading动画的全局设置或局部设置，没有查到关闭loading动画的例子。所以将前端所有文件都检查了一遍，将设置loading的文件锁定在了'./src/utils/request.js'。

结果：未能关闭指定单个页面的loading动画，所以关闭了全局的loading动画。request.js代码如下：

let loading        //定义loading变量function startLoading() {    //使用Element loading-start 方法loading = Loading.service({lock: true,text: '拼命加载中',spinner: "el-icon-loading",background: 'rgba(0, 0, 0, 0.8)'})
}
function endLoading() {    //使用Element loading-close 方法loading.close()
}
//那么 showFullScreenLoading() tryHideFullScreenLoading() 要干的事儿就是将同一时刻的请求合并。
//声明一个变量 needLoadingRequestCount，每次调用showFullScreenLoading方法 needLoadingRequestCount + 1。
//调用tryHideFullScreenLoading()方法，needLoadingRequestCount - 1。needLoadingRequestCount为 0 时，结束 loading。
let needLoadingRequestCount = 0
export function showFullScreenLoading() {if (needLoadingRequestCount === 0) {startLoading()}needLoadingRequestCount++
}export function tryHideFullScreenLoading() {if (needLoadingRequestCount <= 0) returnneedLoadingRequestCount--if (needLoadingRequestCount === 0) {endLoading()}
}// create an axios instance
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,// withCredentials: true, // send cookies when cross-domain requeststimeout: 5000, // request timeout
})// request interceptor
service.interceptors.request.use(config => {// do something before request is sentif (store.getters.token) {// let each request carry token// ['X-Token'] is a custom headers key// please modify it according to the actual situationconfig.headers.token = getToken()// config.headers.contentType="application/json;charset=utf-8"}// showFullScreenLoading() //注释掉，即可关闭全局的loading动画。return config},error => {// do something with request errorconsole.log(error) // for debugreturn Promise.reject(error)}
)

修改部分为倒数第九行，将showFullScreenLoading()注释掉即可。

the end.

【Vue+Element UI】关闭指定某一个页面的loading动画相关推荐

一个基于.Net Core+Vue+Element Ui开发的OA系统
今天给大家推荐一个开源OA系统. 项目简介这是一个基于.Net Core构建的简单.跨平台OA系统.企业可以利用它进行信息化建设,框架提供了用户管理.权限管理.表引擎.流程引擎.BI智能报表,可以大 ...
Vue+Element UI 下，如何给一个表单设置自定义规则或多个验证规则（：rules）
依旧是公司里那个Vue+Element UI的项目.今天遇到了一个新的问题:表单中某个选择器的值不同,控制着下面表单内容是否显示. 大概就是这个样子.由后台返回的"发放方式"的数值 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...

【Vue+Element UI】关闭指定某一个页面的loading动画

【Vue+Element UI】关闭指定某一个页面的loading动画

【Vue+Element UI】关闭指定某一个页面的loading动画相关推荐

最新文章

热门文章