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

最新推荐文章于 2024-05-13 15:55:02 发布

不就是个div嘛

最新推荐文章于 2024-05-13 15:55:02 发布

阅读量488

点赞数 3

分类专栏：前端小白 Element 文章标签： vue.js

本文链接：https://blog.csdn.net/m0_48940868/article/details/111996340

版权

学习目标：

【使用axios的拦截器，实现最简单的全局loading效果】

具体实现步骤—都在main.js里面操作：

【步骤一】

//导入element-ui'
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
单独引入一个loading组件
import {
    Loading } from "element-ui";

Vue.use(ElementUI);

【步骤二】

let loadingAll;配置一个loading实例，方便后面使用
let loading_count = 0; //请求计数器

【步骤三】写两个函数，一个开始loading、一个结束loading

function startLoading() {
   
  if (loading_count == 0) {
   
    loadingAll = Loading.service({
   
      lock: true,
      text: "别急，请求加载数据中...",
      fullscreen