奥利给! loading效果这么搞真的太棒了

爱写Bug的麦洛

已于 2022-07-07 18:04:08 修改

阅读量394

点赞数

分类专栏： # Element

于 2022-07-07 18:01:02 首次发布

本文链接：https://blog.csdn.net/milogenius/article/details/125664032

版权

Vue 全局loading 前端请求工具类封装请求计数

关键词由CSDN通过智能技术生成

Element 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言

大家好,我是麦洛,平时我们在开发中,前端请求后台接口时,loading效果是经常用到的。为了使用方便，我想将此功能封装成一个工具类，经过一番努力，成功实现了想要的效果。现在总结一下，希望帮到有需要的伙伴

解决方案

1.工具类

import Vue from 'vue'

// loading框设置局部刷新，且所有请求完成后关闭loading框
let loading
let needLoadingRequestCount = 0 // 声明一个对象用于存储请求个数
function startLoading (targetdq) {
    loading = Vue.prototype.$loading({
        lock: true,
        text: '努力加载中...',
        background: 'rgba(255,255,255,.4)',
        target: document.querySelector(targetdq) // 设置加载动画区域
    })
}

function endLoading () {
    loading.close()
}
export function showFullScreenLoading (targetdq) {
    if (needLoadingRequestCount === 0) {
        startLoading(targetdq)
    }
    needLoadingRequestCount++
}
export function hideFullScreenLoading () {
    if (needLoadingRequestCount <= 0) return
    needLoadingRequestCount--
    if (needLoadingRequestCount === 0) {
        endLoading()
    }
}

export default {
    showFullScreenLoading,
    hideFullScreenLoading
}

2.引入

在需要使用加载效果的页面引入方法

import { showFullScreenLoading, hideFullScreenLoading } from '@/utils/loading';

3.使用

    handleCollect(modelId){
      showFullScreenLoading();
      requestTools.post(addApplyUrl, {modelId:modelId}).then(res => {
        if (res.data.code === 0) {
          this.$message.success('加入成功');
          hideFullScreenLoading();
        }
      })
    }