请选择 进入手机版 | 继续访问电脑版

vue脚手架开发 + loading组件 + axios拦截器 实现 loading 效果

[复制链接]
谭先生 发表于 2021-1-1 18:29:52 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
学习目标:

【使用axios的拦截器,实现最简朴的全局loading效果】
具体实现步调—都在main.js里面操作:

【步调一】
  1. //导入element-ui'import ElementUI from "element-ui";import "element-ui/lib/theme-chalk/index.css";单独引入一个loading组件import { Loading } from "element-ui";Vue.use(ElementUI);
复制代码
【步调二】
  1. let loadingAll;设置一个loading实例,方便背面使用let loading_count = 0; //请求计数器
复制代码
【步调三】写两个函数,一个开始loading、一个竣事loading
[code]function startLoading() {  if (loading_count == 0) {    loadingAll = Loading.service({      lock: true,      text: "别急,请求加载数据中...",      fullscreen:true,      background: "rgba(0,0,0,0.7)",      spinner: 'el-icon-loading',//自界说加载图标类名    });  }  //请求计数器  loading_count++;}function endLoading() {  loading_count--;//只要进入这个函数,计数器就自减,直到。。  if (loading_count
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )