vue 中单独封装一个loading模块

最新推荐文章于 2024-07-01 18:01:31 发布

w799766

最新推荐文章于 2024-07-01 18:01:31 发布

阅读量848

点赞数

分类专栏： js vue 文章标签： vue js loading

本文链接：https://blog.csdn.net/w799766/article/details/102781665

版权

js 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

vue 中单独封装一个loading模块

import { Loading } from 'element-ui'

// loading实例
let loadingInstance = null
// 个数
let loadingCount = 0

// 关闭loading框
export const finishLoading = () => {
  loadingCount--
  if (loadingInstance && loadingCount === 0) {
    loadingInstance.close()
    loadingInstance = null
  }
}

// 开启loading框
export const startLoading = ({
  text = '数据加载中...',
  fullscreen = true,
  spinner = 'el-icon-loading',
  needLoading = true
} = {}) => {
  loadingCount++
  // 上一个请求的loading还存在，就不需要继续生成loading服务
  if (needLoading && !loadingInstance) {
    loadingInstance = Loading.service({
      fullscreen,
      text,
      spinner,
      background: 'rgba(0, 0, 0, 0.7)'
    })
  }
}